@granto-umbrella/umbrella-components 3.0.58 → 3.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.58",
+  "version": "3.0.60",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.styles.ts

@@ -1,45 +1,15 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import {
   primitiveSizes,
   semanticBorders,
   semanticColors,
   semanticRadius,
   semanticShadows,
+  semanticSizes,
   typographyTokens,
 } from '../../../styles/tokens';
 import CreatableSelect from 'react-select/creatable';
 
-type SelectSize = 'sm' | 'md' | 'lg';
-
-const sizeStyles: Record<
-  SelectSize,
-  {
-    minHeight: string;
-    paddingY: string;
-    paddingX: string;
-    fontSize: string;
-  }
-> = {
-  sm: {
-    minHeight: primitiveSizes.size.x10, // ex: 40px
-    paddingY: primitiveSizes.size.x1, // ex: 4px
-    paddingX: primitiveSizes.size.x2, // ex: 8px
-    fontSize: typographyTokens.fontSizes.bodyS,
-  },
-  md: {
-    minHeight: primitiveSizes.size.x12, // ex: 48px
-    paddingY: primitiveSizes.size.x2, // ex: 8px
-    paddingX: primitiveSizes.size.x3, // ex: 12px
-    fontSize: typographyTokens.fontSizes.bodyM,
-  },
-  lg: {
-    minHeight: primitiveSizes.size.x14, // ex: 56px
-    paddingY: primitiveSizes.size.x3, // ex: 12px
-    paddingX: primitiveSizes.size.x4, // ex: 16px
-    fontSize: typographyTokens.fontSizes.bodyL,
-  },
-};
-
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -61,41 +31,120 @@ export const SupportingText = styled.span<{ $error?: boolean }>`
       : semanticColors.global.text.subtitle.enabled};
 `;
 
-export const CustomSelect = styled(CreatableSelect)<{
+export const CustomSelect = styled(CreatableSelect).attrs({
+  classNamePrefix: 'react-select',
+})<{
+  $size?: keyof typeof semanticSizes.global.padding;
   $error?: boolean;
-  $size?: SelectSize;
 }>`
-  ${({ $size = 'md', $error }) => {
-    const size = sizeStyles[$size];
-
-    return css`
-      .react-select__control {
-        min-height: ${size.minHeight};
-        border-radius: ${semanticRadius.global.radius.md};
-        border: ${semanticBorders.global.sm} solid
-          ${$error
-            ? semanticColors.global.border.danger.enabled
-            : semanticColors.global.border.medium};
-
-        &:focus-within {
-          box-shadow: ${semanticShadows.shadow.md};
-        }
-      }
-
-      .react-select__value-container {
-        padding: ${size.paddingY} ${size.paddingX};
-      }
-
-      .react-select__single-value,
-      .react-select__placeholder,
-      .react-select__input-container {
-        font-size: ${size.fontSize};
-      }
-
-      .react-select__input {
-        margin: 0;
-        padding: 0;
-      }
-    `;
-  }}
+  .react-select__control {
+    background: ${semanticColors.base.background};
+    border: ${semanticBorders.global.sm} solid
+      ${({ $error }) =>
+        $error
+          ? semanticColors.global.border.danger.enabled
+          : semanticColors.global.border.medium};
+    border-radius: ${semanticRadius.global.radius.md};
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+    min-height: ${primitiveSizes.size.x12};
+
+    &:hover {
+      border-color: ${({ $error }) =>
+        $error
+          ? semanticColors.danger.border.hover
+          : semanticColors.branding.border.hover};
+    }
+
+    &:focus-within {
+      border-color: ${({ $error }) =>
+        $error
+          ? semanticColors.danger.border.enabled
+          : semanticColors.branding.border.enabled};
+      box-shadow: ${semanticShadows.shadow.md};
+    }
+
+    &.react-select__control--is-disabled {
+      background: ${semanticColors.global.surface.disabled};
+      border-color: ${semanticColors.global.border.strong};
+      color: ${semanticColors.global.text.onSurface.enabled};
+      cursor: not-allowed;
+    }
+  }
+
+  .react-select__value-container {
+    padding: ${({ $size = 'md' }) => semanticSizes.global.padding[$size]};
+    font-size: ${typographyTokens.fontSizes.labelM};
+    color: ${semanticColors.base.text};
+  }
+
+  .react-select__placeholder {
+    color: ${semanticColors.global.text.onSurface.subtitle};
+    font-size: ${typographyTokens.fontSizes.labelM};
+  }
+
+  .react-select__menu {
+    background: ${semanticColors.base.background};
+    border-radius: ${semanticRadius.global.radius.md};
+    box-shadow: ${semanticShadows.shadow.lg};
+    border: ${semanticBorders.global.sm} solid
+      ${semanticColors.global.border.default};
+    z-index: 1000;
+  }
+
+  .react-select__option {
+    padding: ${({ $size = 'md' }) => semanticSizes.global.padding[$size]};
+    font-size: ${typographyTokens.fontSizes.labelM};
+    cursor: pointer;
+    transition:
+      background 0.2s,
+      color 0.2s;
+    color: ${semanticColors.base.text};
+
+    &:hover {
+      background: ${semanticColors.branding.surface.hover};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    }
+
+    &:active {
+      background: ${semanticColors.branding.surface.pressed};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    }
+  }
+
+  .react-select__option--is-selected {
+    background: ${semanticColors.branding.surface.enabled};
+    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    font-weight: ${typographyTokens.fontWeights.semibold};
+
+    &:hover {
+      background: ${semanticColors.branding.surface.hover};
+    }
+  }
+
+  .react-select__option--is-focused {
+    background: ${semanticColors.neutral[100]};
+    color: ${semanticColors.base.text};
+  }
+
+  .react-select__indicator-separator {
+    background-color: ${semanticColors.global.border.medium};
+  }
+
+  .react-select__dropdown-indicator {
+    color: ${semanticColors.global.text.onSurface.enabled};
+
+    &:hover {
+      color: ${semanticColors.branding.text.accent.enabled};
+    }
+  }
+
+  .react-select__clear-indicator {
+    color: ${semanticColors.global.text.onSurface.enabled};
+
+    &:hover {
+      color: ${semanticColors.danger.text.enabled};
+    }
+  }
 `;

package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.tsx

@@ -115,6 +115,7 @@ export default function EditableDurationSelect({
       {label && <Label>{label}</Label>}
 
       <CustomSelect
+        classNamePrefix="react-select"
         isSearchable
         isDisabled={disabled}
         $size={size}