Merged in chore/sw-3145-move-deprecated-select (pull request #2518)

chore(SW-3145): Move DeprecatedSelect to design-system

* Move DeprecatedSelect to design-system


Approved-by: Linus Flood

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 
 import styles from "./filter.module.css"
 

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx

@@ -3,11 +3,11 @@ import { useReducer } from "react"
 import { useIntl } from "react-intl"
 
 import { type MembershipLevel } from "@scandic-hotels/common/constants/membershipLevels"
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 
 import { membershipLevels } from "@/constants/membershipLevels"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
-import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 
 import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"

apps/scandic-web/components/DestinationFilterAndSort/Sort/index.tsx

@@ -2,9 +2,9 @@
 
 import { useIntl } from "react-intl"
 
-import { useDestinationDataStore } from "@/stores/destination-data"
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 
-import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
+import { useDestinationDataStore } from "@/stores/destination-data"
 
 import type { SortOption } from "@scandic-hotels/trpc/enums/destinationFilterAndSort"
 

apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -4,11 +4,10 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
-import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
-
 import styles from "./child-selector.module.css"
 
 import type {

apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -21,7 +22,6 @@ import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
 import Button from "@/components/TempDesignSystem/Button"
-import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
 import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
 
 import { DEFAULT_SORT } from "../../HotelSorter"

apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx

@@ -4,7 +4,8 @@ import { usePathname, useSearchParams } from "next/navigation"
 import { useCallback } from "react"
 import { useIntl } from "react-intl"
 
-import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
+
 import { trackEvent } from "@/utils/tracking/base"
 
 import {

apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.ts

@@ -1,20 +0,0 @@
-import type { ReactElement } from "react"
-import type { Key } from "react-aria-components"
-
-export interface SelectProps
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect"> {
-  defaultSelectedKey?: Key
-  items: { label: string; value: Key }[]
-  label: string
-  name: string
-  onSelect: (key: Key) => void
-  value?: string | number
-  maxHeight?: number
-  showRadioButton?: boolean
-  discreet?: boolean
-  isNestedInModal?: boolean
-  optionsIcon?: ReactElement<any>
-}
-
-export type SelectPortalContainer = HTMLDivElement | undefined
-export type SelectPortalContainerArgs = HTMLDivElement | null

apps/scandic-web/components/TempDesignSystem/Form/Select/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useController, useFormContext } from "react-hook-form"
 
-import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
+import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 
 import type { SelectProps } from "./select"
 

apps/scandic-web/components/TempDesignSystem/Form/Select/select.ts

@@ -1,12 +1,28 @@
+import type { ReactElement } from "react"
+import type { Key } from "react-aria-components"
 import type { RegisterOptions } from "react-hook-form"
 
-import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/DeprecatedSelect/select"
+interface ReactAriaSelectProps
+  extends Omit<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    "onSelect" | "value"
+  > {
+  defaultSelectedKey?: Key
+  items: { label: string; value: Key }[]
+  label: string
+  name: string
+  maxHeight?: number
+  showRadioButton?: boolean
+  discreet?: boolean
+  isNestedInModal?: boolean
+  optionsIcon?: ReactElement<any>
+}
 
 export interface SelectProps
   extends Omit<
       React.SelectHTMLAttributes<HTMLSelectElement>,
       "name" | "onSelect" | "placeholder"
     >,
-    Omit<ReactAriaSelectProps, "onSelect" | "ref" | "value"> {
+    Omit<ReactAriaSelectProps, "ref" | "value"> {
   registerOptions?: RegisterOptions
 }

apps/scandic-web/components/TempDesignSystem/Form/SelectChevron/index.tsx

@@ -1,16 +0,0 @@
-import { type IconProps } from "@scandic-hotels/design-system/Icons"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import styles from "./chevron.module.css"
-
-export default function SelectChevron(props: IconProps) {
-  return (
-    <span aria-hidden="true" className={styles.chevron}>
-      <MaterialIcon
-        icon="keyboard_arrow_down"
-        color={props.color ?? "Icon/Default"}
-        size={20}
-      />
-    </span>
-  )
-}

packages/design-system/lib/components/DeprecatedSelect/SelectChevron/chevron.module.css

@@ -2,6 +2,6 @@
   display: flex;
 }
 
-div[data-rac][data-open="true"] .chevron {
+div[data-rac][data-open='true'] .chevron {
   transform: rotate(180deg);
 }

packages/design-system/lib/components/DeprecatedSelect/SelectChevron/index.tsx

@@ -0,0 +1,15 @@
+import { IconProps } from '../../Icons'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import styles from './chevron.module.css'
+
+export default function SelectChevron(props: IconProps) {
+  return (
+    <span aria-hidden="true" className={styles.chevron}>
+      <MaterialIcon
+        icon="keyboard_arrow_down"
+        color={props.color ?? 'Icon/Default'}
+        size={20}
+      />
+    </span>
+  )
+}

packages/design-system/lib/components/DeprecatedSelect/index.tsx

@@ -1,5 +1,5 @@
-"use client"
+'use client'
-import { useState } from "react"
+import { ReactElement, useState } from 'react'
 import {
   Button,
   type Key,
@@ -8,26 +8,39 @@ import {
   Popover,
   Select as ReactAriaSelect,
   SelectValue,
-} from "react-aria-components"
+} from 'react-aria-components'
 
-import Body from "@scandic-hotels/design-system/Body"
+import SelectChevron from './SelectChevron'
-import { Label } from "@scandic-hotels/design-system/Label"
 
-import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
+import styles from './select.module.css'
+import Body from '../Body'
+import { Label } from '../Label'
 
-import SelectChevron from "../Form/SelectChevron"
+interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onSelect'> {
+  defaultSelectedKey?: Key
+  items: { label: string; value: Key }[]
+  label: string
+  name: string
+  onSelect: (key: Key) => void
+  value?: string | number
+  maxHeight?: number
+  showRadioButton?: boolean
+  discreet?: boolean
+  isNestedInModal?: boolean
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  optionsIcon?: ReactElement<any>
+}
 
-import styles from "./select.module.css"
+type SelectPortalContainer = HTMLDivElement | undefined
-
+type SelectPortalContainerArgs = HTMLDivElement | null
-import type {
-  SelectPortalContainer,
-  SelectPortalContainerArgs,
-  SelectProps,
-} from "./select"
 
+/**
+ * @deprecated Do not use.
+ */
 export default function Select({
-  className = "",
+  className = '',
-  "aria-label": ariaLabel,
+  'aria-label': ariaLabel,
   defaultSelectedKey,
   items,
   label,
@@ -59,16 +72,16 @@ export default function Select({
   let chevronProps = {}
 
   if (discreet) {
-    chevronProps = { color: "baseButtonTextOnFillNormal" }
+    chevronProps = { color: 'baseButtonTextOnFillNormal' }
   } else if (disabled) {
-    chevronProps = { color: "disabled" }
+    chevronProps = { color: 'disabled' }
   }
 
   return (
     <div className={`${styles.container} ${className}`} ref={setRef}>
       <ReactAriaSelect
         aria-label={ariaLabel}
-        className={`${styles.select} ${discreet ? styles.discreet : ""} select-container`}
+        className={`${styles.select} ${discreet ? styles.discreet : ''} select-container`}
         defaultSelectedKey={defaultSelectedKey}
         name={name}
         onSelectionChange={handleOnSelect}
@@ -86,14 +99,13 @@ export default function Select({
                 <>
                   <Label
                     required={required}
-                    size={discreet ? "discreet" : "regular"}
+                    size={discreet ? 'discreet' : 'regular'}
                   >
                     {label}
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                     {discreet && `:`}
                   </Label>
                   {selectedText && (
-                    <Body className={optionsIcon ? styles.iconLabel : ""}>
+                    <Body className={optionsIcon ? styles.iconLabel : ''}>
                       {optionsIcon ? optionsIcon : null}
                       {selectedText}
                     </Body>
@@ -138,3 +150,15 @@ export default function Select({
     </div>
   )
 }
+
+function useSetOverflowVisibleOnRA(isNestedInModal?: boolean) {
+  function setOverflowVisible(isOpen: boolean) {
+    if (isOpen) {
+      document.body.style.overflow = 'visible'
+    } else if (!isNestedInModal) {
+      document.body.style.overflow = ''
+    }
+  }
+
+  return setOverflowVisible
+}

packages/design-system/lib/components/DeprecatedSelect/select.module.css

@@ -10,16 +10,16 @@
   gap: var(--Spacing-x-half);
 }
 
-.select[data-focused="true"] {
+.select[data-focused='true'] {
   border: 1px solid var(--Border-Interactive-Focus);
   outline: none;
 }
 
-.select[data-focused="true"].discreet {
+.select[data-focused='true'].discreet {
   border: 1px solid transparent;
   outline: none;
 }
-.select[data-focus-visible="true"].discreet {
+.select[data-focus-visible='true'].discreet {
   border: 1px solid var(--Border-Interactive-Focus);
 }
 
@@ -97,8 +97,8 @@
   padding: var(--Spacing-x1);
 }
 
-.listBoxItem[data-focused="true"],
+.listBoxItem[data-focused='true'],
-.listBoxItem[data-selected="true"] {
+.listBoxItem[data-selected='true'] {
   background: var(--UI-Input-Controls-Surface-Hover);
   border-radius: var(--Corner-radius-md);
   outline: none;
@@ -111,7 +111,7 @@
 
 .listBoxItem.showRadioButton:before {
   flex-shrink: 0;
-  content: "";
+  content: '';
   margin-right: var(--Spacing-x-one-and-half);
   background-color: white;
   width: 24px;
@@ -120,6 +120,6 @@
   box-shadow: inset 0 0 0 2px var(--Base-Border-Normal);
 }
 
-.listBoxItem[data-selected="true"].showRadioButton:before {
+.listBoxItem[data-selected='true'].showRadioButton:before {
   box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
 }

packages/design-system/package.json

@@ -11,6 +11,7 @@
     "./ChipButton": "./dist/components/ChipButton/index.js",
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
+    "./DeprecatedSelect": "./dist/components/DeprecatedSelect/index.js",
     "./Divider": "./dist/components/Divider/index.js",
     "./Footnote": "./dist/components/Footnote/index.js",
     "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js",