Select updates

lib/src/dropdown/Dropdown.tsx

@@ -7,27 +7,7 @@ import useTheme from "../useTheme";
 import * as Popover from "@radix-ui/react-popover";
 import DropdownMenu from "./DropdownMenu";
 import DxcIcon from "../icon/Icon";
-
-const useWidth = (target) => {
-  const [width, setWidth] = useState(0);
-
-  useEffect(() => {
-    if (target != null) {
-      setWidth(target.getBoundingClientRect().width);
-
-      const triggerObserver = new ResizeObserver((entries) => {
-        const rect = entries[0].target.getBoundingClientRect();
-        setWidth(rect?.width);
-      });
-      triggerObserver.observe(target);
-      return () => {
-        triggerObserver.unobserve(target);
-      };
-    }
-  }, [target]);
-
-  return width;
-};
+import useWidth from "../utils/useWidth";
 
 const DxcDropdown = ({
   options,

lib/src/select/Listbox.tsx

@@ -1,12 +1,10 @@
-import React, { useId, useLayoutEffect, useRef } from "react";
+import React, { useLayoutEffect, useRef } from "react";
 import styled from "styled-components";
 import useTranslatedLabels from "../useTranslatedLabels";
 import { ListboxProps } from "./types";
 import Option from "./Option";
 import DxcIcon from "../icon/Icon";
-
-const groupsHaveOptions = (options) =>
-  options?.[0].options ? options.some((groupOption) => groupOption.options?.length > 0) : true;
+import { groupsHaveOptions } from "./selectUtils";
 
 const Listbox = ({
   id,
@@ -23,25 +21,24 @@ const Listbox = ({
 }: ListboxProps): JSX.Element => {
   const translatedLabels = useTranslatedLabels();
   const listboxRef = useRef(null);
-  const listboxId = `select-${useId()}`;
-
+
   let globalIndex = optional && !multiple ? 0 : -1;
   const mapOptionFunc = (option, mapIndex) => {
-    const groupId = `${listboxId}-group-${mapIndex}`;
+    const groupId = `${id}-group-${mapIndex}`;
     if (option.options) {
       return (
         option.options.length > 0 && (
           <li key={groupId}>
-            <GroupList role="listbox" aria-labelledby={groupId}>
+            <ul role="listbox" aria-labelledby={groupId} style={{ padding: 0 }}>
               <GroupLabel role="presentation" id={groupId}>
                 {option.label}
               </GroupLabel>
               {option.options.map((singleOption) => {
                 globalIndex++;
                 return (
                   <Option
-                    key={`${listboxId}-option-${singleOption.value}`}
-                    id={`${listboxId}-option-${globalIndex}`}
+                    key={`${id}-option-${singleOption.value}`}
+                    id={`${id}-option-${globalIndex}`}
                     option={singleOption}
                     onClick={handleOptionOnClick}
                     multiple={multiple}
@@ -54,16 +51,16 @@ const Listbox = ({
                   />
                 );
               })}
-            </GroupList>
+            </ul>
           </li>
         )
       );
     } else {
       globalIndex++;
       return (
         <Option
-          key={`${listboxId}-option-${option.value}`}
-          id={`${listboxId}-option-${globalIndex}`}
+          key={`${id}-option-${option.value}`}
+          id={`${id}-option-${globalIndex}`}
           option={option}
           onClick={handleOptionOnClick}
           multiple={multiple}
@@ -88,7 +85,7 @@ const Listbox = ({
     visualFocusedOptionEl?.scrollIntoView?.({ block: "nearest", inline: "start" });
   }, [visualFocusIndex]);
 
-  const hasOptionGroups = options.some(option => option.options?.length > 0);
+  const hasOptionGroups = options.some((option) => option.options?.length > 0);
 
   return (
     <ListboxContainer
@@ -100,7 +97,7 @@ const Listbox = ({
         event.preventDefault();
       }}
       ref={listboxRef}
-      aria-multiselectable={!hasOptionGroups ? multiple: undefined}
+      aria-multiselectable={!hasOptionGroups ? multiple : undefined}
       style={styles}
       role={hasOptionGroups ? "list" : "listbox"}
       aria-label="List of options"
@@ -143,12 +140,13 @@ const ListboxContainer = styled.ul`
   border: 1px solid ${(props) => props.theme.listDialogBorderColor};
   border-radius: 0.25rem;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  cursor: default;
   color: ${(props) => props.theme.listOptionFontColor};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.listOptionFontSize};
   font-style: ${(props) => props.theme.listOptionFontStyle};
   font-weight: ${(props) => props.theme.listOptionFontWeight};
+  line-height: 24px;
+  cursor: default;
 `;
 
 const OptionsSystemMessage = styled.span`
@@ -170,14 +168,10 @@ const NoMatchesFoundIcon = styled.span`
   font-size: 16px;
 `;
 
-const GroupList = styled.ul`
-  padding: 0;
-`;
-
 const GroupLabel = styled.li`
   padding: 4px 16px;
   font-weight: ${(props) => props.theme.listGroupLabelFontWeight};
   line-height: 1.715em;
 `;
 
-export default React.memo(Listbox);
+export default Listbox;

lib/src/select/Option.tsx

@@ -17,7 +17,6 @@ const Option = ({
   const handleOnMouseEnter = (event: React.MouseEvent) => {
     const label = event.currentTarget;
     const optionElement = document.getElementById(id);
-
     if (optionElement.title === "" && label.scrollWidth > label.clientWidth) optionElement.title = option.label;
   };
 
@@ -31,7 +30,6 @@ const Option = ({
       selected={isSelected}
       role="option"
       aria-selected={!multiple ? isSelected : undefined}
-      tabIndex={0}
     >
       <StyledOption
         visualFocused={visualFocused}
@@ -40,7 +38,11 @@ const Option = ({
         grouped={isGroupedOption}
         multiple={multiple}
       >
-        {multiple && <DxcCheckbox checked={isSelected} tabIndex={-1} />}
+        {multiple && (
+          <div style={{ display: "flex", pointerEvents: "none" }}>
+            <DxcCheckbox checked={isSelected} tabIndex={-1} />
+          </div>
+        )}
         {option.icon && (
           <OptionIcon grouped={isGroupedOption} multiple={multiple}>
             {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon}
@@ -64,7 +66,6 @@ const OptionItem = styled.li<{ visualFocused: OptionProps["visualFocused"]; sele
   box-shadow: inset 0 0 0 2px transparent;
   ${(props) => props.visualFocused && `box-shadow: inset 0 0 0 2px ${props.theme.focusListOptionBorderColor};`}
   ${(props) => props.selected && `background-color: ${props.theme.selectedListOptionBackgroundColor}`};
-  line-height: 1.715em;
   cursor: pointer;
 
   &:hover {
@@ -88,10 +89,11 @@ const StyledOption = styled.span<{
   selected: OptionProps["isSelected"];
   last: OptionProps["isLastOption"];
 }>`
+  box-sizing: border-box;
   display: flex;
-  padding: 0.25rem 0.5rem 0.188rem 0;
-  min-height: 24px;
   align-items: center;
+  height: 32px;
+  padding: 4px 8px 4px 0;
   ${(props) => props.grouped && props.multiple && `padding-left: 16px;`}
   ${(props) =>
     props.last || props.visualFocused || props.selected
@@ -100,29 +102,28 @@ const StyledOption = styled.span<{
 `;
 
 const OptionIcon = styled.span<{ grouped: OptionProps["isGroupedOption"]; multiple: OptionProps["multiple"] }>`
-  display: flex;
-  padding: 0.125rem;
   margin-left: ${(props) => (props.grouped && !props.multiple ? "16px" : "8px")};
+  display: grid;
+  place-items: center;
   color: ${(props) => props.theme.listOptionIconColor};
-
+  font-size: 24px;
   svg {
     height: 24px;
     width: 24px;
   }
-  font-size: 24px;
 `;
 
 const OptionContent = styled.span<{
   grouped: OptionProps["isGroupedOption"];
   multiple: OptionProps["multiple"];
   hasIcon: boolean;
 }>`
+  margin-left: ${(props) => (props.grouped && !props.multiple && !props.hasIcon ? "16px" : "8px")};
   display: flex;
   justify-content: space-between;
   gap: 0.25rem;
   width: 100%;
   overflow: hidden;
-  margin-left: ${(props) => (props.grouped && !props.multiple && !props.hasIcon ? "16px" : "8px")};
 `;
 
 const OptionLabel = styled.span`
@@ -138,4 +139,4 @@ const OptionSelectedIndicator = styled.span`
   font-size: 16px;
 `;
 
-export default React.memo(Option);
+export default Option;

lib/src/select/Select.stories.tsx

@@ -545,7 +545,7 @@ const SelectListbox = () => {
           <Title title="Grouped icons (Material Symbols)" theme="light" level={4} />
           <Listbox
             id="x14"
-            currentValue={["0", "3"]}
+            currentValue={"4"}
             options={icon_options_grouped_material}
             visualFocusIndex={-1}
             lastOptionIndex={3}
@@ -561,7 +561,7 @@ const SelectListbox = () => {
           <Title title="Grouped icons (Material)" theme="light" level={4} />
           <Listbox
             id="x15"
-            currentValue={["facebook", "figma"]}
+            currentValue={["car", "motorcycle", "train"]}
             options={options_material}
             visualFocusIndex={-1}
             lastOptionIndex={6}