feat: add select divider (#9)

mauroreisvieira · web-flow · commit c8f05b78be87 · 2025-10-02T08:57:27.000+01:00
* feat: add select divider

* chore: update logic and examples

* test: update snapshots
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/base/src/accordion/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/base/src/accordion/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`snapshot accordion renders correctly 1`] = `
           class="header"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               class="icon"
@@ -56,7 +56,7 @@ exports[`snapshot accordion renders correctly 1`] = `
           class="header"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               class="icon"
diff --git a/packages/components/base/src/button/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/base/src/button/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`snapshot Button renders correctly 1`] = `
         class="root text"
       >
         <span
-          class="root size_l skin_default"
+          class="VsR_m2r2hGIr7NfX85BU YicCROjsCroMsOGSwMAE sf93RNkSSnS5VkGCtSLh"
         >
           <svg
             fill="currentColor"
diff --git a/packages/components/base/src/collapse/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/base/src/collapse/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`snapshot Collapse renders correctly 1`] = `
       class="header"
     >
       <span
-        class="root size_text skin_default"
+        class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
       >
         <svg
           class="icon"
diff --git a/packages/components/base/src/menu/styles/menu-divider.module.scss b/packages/components/base/src/menu/styles/menu-divider.module.scss
@@ -3,9 +3,9 @@
 @use "@react-ck/scss-utils";
 
 .root {
+  background-color: theme.get-color(neutral-light-300);
   display: block;
   box-sizing: border-box;
-  background-color: theme.get-color(neutral-light-300);
 
   &.text {
     @include text.text-base(extra-small);
diff --git a/packages/components/base/src/pagination/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/base/src/pagination/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
           class="root text"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               fill="currentColor"
@@ -48,7 +48,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
           class="root text"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               fill="currentColor"
@@ -79,7 +79,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
           class="root text"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               fill="currentColor"
@@ -110,7 +110,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
           class="root text"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               fill="currentColor"
@@ -141,7 +141,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
           class="root text"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               fill="currentColor"
@@ -172,7 +172,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
           class="root text"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               fill="currentColor"
@@ -203,7 +203,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
           class="root text"
         >
           <span
-            class="root size_text skin_default"
+            class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"
           >
             <svg
               fill="currentColor"
diff --git a/packages/components/base/src/select/SelectDivider.tsx b/packages/components/base/src/select/SelectDivider.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { DISPLAY_NAME_ATTRIBUTE } from "@react-ck/react-utils";
+import type { SelectDividerProps } from "./types";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+
+/**
+ * A divider component for the Select component.
+ * Used to group options visually within a select dropdown.
+ *
+ * @param props - Component props {@link SelectDividerProps}
+ * @returns React element
+ */
+function SelectDivider({
+  className,
+  children,
+  ...props
+}: Readonly<SelectDividerProps>): React.ReactElement {
+  return (
+    <div
+      className={classNames(styles.divider, Boolean(children) && styles.divider_text, className)}
+      {...props}>
+      {children}
+    </div>
+  );
+}
+
+SelectDivider[DISPLAY_NAME_ATTRIBUTE] = "SelectDivider";
+
+export { SelectDivider };
diff --git a/packages/components/base/src/select/SelectOption.tsx b/packages/components/base/src/select/SelectOption.tsx
@@ -2,7 +2,7 @@ import { Menu } from "../menu";
 import React, { useContext, useMemo } from "react";
 import { SelectContext } from "./context";
 import { DISPLAY_NAME_ATTRIBUTE } from "@react-ck/react-utils";
-import { type SelectOptionProps } from "./types";
+import type { SelectOptionProps } from "./types";
 
 const SelectOption = ({
   value,
diff --git a/packages/components/base/src/select/index.tsx b/packages/components/base/src/select/index.tsx
@@ -1,16 +1,20 @@
 import styles from "./styles/index.module.scss";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SelectOption } from "./SelectOption";
+import { SelectDivider } from "./SelectDivider";
 import { Menu } from "../menu";
 import { Dropdown } from "../dropdown";
 import { Input } from "../input";
 import classNames from "classnames";
-import { megeRefs, raf } from "@react-ck/react-utils";
+import { mergeRefs, raf } from "@react-ck/react-utils";
 import { EmptyState } from "../empty-state";
 import { getChildrenData, simplifyString, valueAsArray } from "./utils";
 import { type SelectProps, type ChangeHandler } from "./types";
 import { SelectContext, type SelectContextProps } from "./context";
 import { useFormFieldContext } from "../form-field";
+import { Spinner } from "../spinner";
+import { Icon } from "@react-ck/icon";
+import { IconChevronDown } from "@react-ck/icon/icons/IconChevronDown";
 
 /** Default positions to exclude from auto-positioning */
 const defaultExclude: SelectProps["excludeAutoPosition"] = [
@@ -77,6 +81,7 @@ const Select = ({
   disabled,
   displayValueDivider = ",",
   fullWidth,
+  loading,
   position,
   excludeAutoPosition = defaultExclude,
   ref,
@@ -256,7 +261,9 @@ const Select = ({
     const resizeObserver = new ResizeObserver(() => {
       if (!valueSlotRefCurrent || !sizeSetterRef.current) return;
 
-      valueSlotRefCurrent.style.width = `${sizeSetterRef.current.clientWidth + 10}px`;
+      if (valueSlotRefCurrent.clientWidth < sizeSetterRef.current.clientWidth) {
+        valueSlotRefCurrent.style.width = `${sizeSetterRef.current.clientWidth + 10}px`;
+      }
     });
     resizeObserver.observe(sizeSetterRef.current);
 
@@ -278,7 +285,7 @@ const Select = ({
           styles[`skin_${computedSkin}`],
           formFieldContext === undefined && styles.standalone,
           (disabled || formFieldContext?.disabled) && styles.disabled,
-
+          loading && styles.loading,
           (fullWidth ?? formFieldContext?.fullWidth) && styles.full_width,
           className,
         )}
@@ -291,11 +298,17 @@ const Select = ({
           onBlur?.(e);
         }}>
         <div ref={valueSlotRef} className={styles.value_slot}>
-          {displayValue || <span className={styles.placeholder}>{placeholder}</span>}
+          <div className={styles.value_content}>
+            {displayValue || <span className={styles.placeholder}>{placeholder}</span>}
+          </div>
+          {loading && <Spinner size="l" />}
+          <Icon size="l">
+            <IconChevronDown />
+          </Icon>
         </div>
 
         <select
-          ref={megeRefs(ref, selectRef)}
+          ref={mergeRefs(ref, selectRef)}
           id={computedId}
           name={selectName}
           multiple={selectMultiple}
@@ -372,15 +385,17 @@ const Select = ({
 
 type SelectWithOption = typeof Select & {
   Option: typeof SelectOption;
+  Divider: typeof SelectDivider;
 };
 
-// Add the Option property
+// Add the Option and Divider properties
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- needed for compound component definition with forward ref
 const CompoundSelect: SelectWithOption = Select as SelectWithOption;
 
 CompoundSelect.Option = SelectOption;
+CompoundSelect.Divider = SelectDivider;
 
 export { CompoundSelect as Select };
 
-export { type SelectOptionProps, type SelectProps } from "./types";
+export { type SelectOptionProps, type SelectProps, type SelectDividerProps } from "./types";
diff --git a/packages/components/base/src/select/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/base/src/select/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -10,9 +10,31 @@ exports[`snapshot Select renders correctly 1`] = `
     <div
       class="value_slot"
     >
+      <div
+        class="value_content"
+      >
+        <span
+          class="placeholder"
+        />
+      </div>
       <span
-        class="placeholder"
-      />
+        class="VsR_m2r2hGIr7NfX85BU YicCROjsCroMsOGSwMAE sf93RNkSSnS5VkGCtSLh"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
     </div>
     <select
       class="native_element"
diff --git a/packages/components/base/src/select/styles/index.module.scss b/packages/components/base/src/select/styles/index.module.scss
@@ -1,14 +1,15 @@
 @use "@react-ck/theme";
 @use "../../form-field/styles/shared" as form-field;
+@use "../../text/styles/shared" as text;
 
 .root {
   @include form-field.form-field-input;
 
-  position: relative;
   display: inline-block;
   vertical-align: middle;
-  cursor: pointer;
+  position: relative;
   min-width: theme.get-spacing(10);
+  cursor: pointer;
 
   &.full_width {
     @include form-field.form-field-input-full-width;
@@ -18,21 +19,28 @@
 }
 
 .value_slot {
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: theme.get-spacing(1);
+}
+
+.value_content {
   display: flex;
   align-items: flex-start;
   justify-self: unset;
   flex-wrap: wrap;
   gap: theme.get-spacing(0.5);
-  max-width: 100%;
 }
 
 .display_value_item {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: inline-block;
-  max-width: 100%;
-  vertical-align: middle;
 }
 
 // When not inside form field, has own border, etc
@@ -64,27 +72,51 @@
 
 .native_element {
   position: absolute;
-  z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
+  z-index: 1;
   pointer-events: none;
 }
 
 .disabled {
   @include theme.disabled;
 }
 
+.loading {
+  pointer-events: none;
+}
+
 /*
   This is a hidden element that is used to set the width of the value slot.
   It is used to ensure that the value slot is the same width as the native select element.
 */
 .size_setter {
-  position: absolute;
   display: block;
   flex-direction: column;
-  pointer-events: none;
+  position: absolute;
   opacity: 0;
+  pointer-events: none;
+}
+
+.divider {
+  margin-block: theme.get-spacing(0.5);
+
+  &:not(.divider_text) {
+    border-bottom: 1px solid theme.get-color(neutral-light-300);
+  }
+
+  &.divider_text {
+    @include text.text-base(small);
+
+    color: theme.get-color(neutral-light-600);
+    padding-inline: theme.get-spacing(0.5);
+
+    &:not(:first-of-type) {
+      padding-top: theme.get-spacing(1);
+      border-top: 1px solid theme.get-color(neutral-light-300);
+    }
+  }
 }
diff --git a/packages/components/base/src/select/types.ts b/packages/components/base/src/select/types.ts
diff --git a/packages/components/base/src/select/utils.ts b/packages/components/base/src/select/utils.ts
diff --git a/packages/components/base/src/spinner/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/base/src/spinner/specs/__snapshots__/index.snapshot.test.tsx.snap
diff --git a/packages/docs/stories/src/form-select.stories.tsx b/packages/docs/stories/src/form-select.stories.tsx

Original file line number	Diff line number	Diff line change
@@ -15,7 +15,7 @@ exports[`snapshot accordion renders correctly 1`] = `
`15`	`15`	`class="header"`
`16`	`16`	`>`
`17`	`17`	`<span`
`18`		`- class="root size_text skin_default"`
	`18`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`19`	`19`	`>`
`20`	`20`	`<svg`
`21`	`21`	`class="icon"`
@@ -56,7 +56,7 @@ exports[`snapshot accordion renders correctly 1`] = `
`56`	`56`	`class="header"`
`57`	`57`	`>`
`58`	`58`	`<span`
`59`		`- class="root size_text skin_default"`
	`59`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`60`	`60`	`>`
`61`	`61`	`<svg`
`62`	`62`	`class="icon"`
Original file line number	Diff line number	Diff line change
@@ -14,7 +14,7 @@ exports[`snapshot Button renders correctly 1`] = `
`14`	`14`	`class="root text"`
`15`	`15`	`>`
`16`	`16`	`<span`
`17`		`- class="root size_l skin_default"`
	`17`	`+ class="VsR_m2r2hGIr7NfX85BU YicCROjsCroMsOGSwMAE sf93RNkSSnS5VkGCtSLh"`
`18`	`18`	`>`
`19`	`19`	`<svg`
`20`	`20`	`fill="currentColor"`
Original file line number	Diff line number	Diff line change
@@ -9,7 +9,7 @@ exports[`snapshot Collapse renders correctly 1`] = `
`9`	`9`	`class="header"`
`10`	`10`	`>`
`11`	`11`	`<span`
`12`		`- class="root size_text skin_default"`
	`12`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`13`	`13`	`>`
`14`	`14`	`<svg`
`15`	`15`	`class="icon"`
Original file line number	Diff line number	Diff line change
@@ -17,7 +17,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
`17`	`17`	`class="root text"`
`18`	`18`	`>`
`19`	`19`	`<span`
`20`		`- class="root size_text skin_default"`
	`20`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`21`	`21`	`>`
`22`	`22`	`<svg`
`23`	`23`	`fill="currentColor"`
@@ -48,7 +48,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
`48`	`48`	`class="root text"`
`49`	`49`	`>`
`50`	`50`	`<span`
`51`		`- class="root size_text skin_default"`
	`51`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`52`	`52`	`>`
`53`	`53`	`<svg`
`54`	`54`	`fill="currentColor"`
@@ -79,7 +79,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
`79`	`79`	`class="root text"`
`80`	`80`	`>`
`81`	`81`	`<span`
`82`		`- class="root size_text skin_default"`
	`82`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`83`	`83`	`>`
`84`	`84`	`<svg`
`85`	`85`	`fill="currentColor"`
@@ -110,7 +110,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
`110`	`110`	`class="root text"`
`111`	`111`	`>`
`112`	`112`	`<span`
`113`		`- class="root size_text skin_default"`
	`113`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`114`	`114`	`>`
`115`	`115`	`<svg`
`116`	`116`	`fill="currentColor"`
@@ -141,7 +141,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
`141`	`141`	`class="root text"`
`142`	`142`	`>`
`143`	`143`	`<span`
`144`		`- class="root size_text skin_default"`
	`144`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`145`	`145`	`>`
`146`	`146`	`<svg`
`147`	`147`	`fill="currentColor"`
@@ -172,7 +172,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
`172`	`172`	`class="root text"`
`173`	`173`	`>`
`174`	`174`	`<span`
`175`		`- class="root size_text skin_default"`
	`175`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`176`	`176`	`>`
`177`	`177`	`<svg`
`178`	`178`	`fill="currentColor"`
@@ -203,7 +203,7 @@ exports[`snapshot Pagination renders correctly 1`] = `
`203`	`203`	`class="root text"`
`204`	`204`	`>`
`205`	`205`	`<span`
`206`		`- class="root size_text skin_default"`
	`206`	`+ class="VsR_m2r2hGIr7NfX85BU YEVFelv_bfcF2Ee4WG8g sf93RNkSSnS5VkGCtSLh"`
`207`	`207`	`>`
`208`	`208`	`<svg`
`209`	`209`	`fill="currentColor"`