Merged in fix/book-149-incorrect-onfocus-behaviour-booking-widget (pull request #3320)

Fix/book 149 incorrect onfocus behaviour booking widget

* fix(BOOK-149): fixed labels shifting

* fix(BOOK-149): reintroduced sticky position

* fix(BOOK-149): added missing border to "where" text field

* added overflow to datepicker

* comment fixes

* removed separate typography declaration

* changed to onPress

* fix(BOOK-149): moved components to separate files

* fix(BOOK-149): removed desktop & mobile specific css classes

* fix(BOOK-149): new implementation of date and room modals

* dependencies update

* fix(BOOK-149): fixed child age dropdown issue, related error message, and Rooms & Guests container height

* updated info button to new variant

* fix(BOOK-149): prevent scrolling of background when modals are open in Tablet mode

* fixed overlay issue and added focus indicator on mobile

* fixed missing space in css

* rebase and fixed icon buttons after update

* simplified to use explicit boolean

* PR comments fixes

* more PR comment fixes

* PR comment fixes

* fixed setIsOpen((prev) => !prev)

* fixed issues with room error not showing properly on mobile

* fixing pr comments

* fixed flickering on GuestRoomModal


Approved-by: Erik Tiekstra

packages/design-system/lib/components/Button/button.module.css

@@ -14,7 +14,7 @@
   }
 
   &[data-disabled] {
-    cursor: unset;
+    cursor: not-allowed;
   }
 
   &[data-pending] {

packages/design-system/lib/components/Form/Checkbox/index.tsx

@@ -32,6 +32,7 @@ const CheckboxComponent = forwardRef<
     hideError,
     topAlign = false,
     errorCodeMessages,
+    disabled = false,
   },
   ref
 ) {
@@ -49,7 +50,7 @@ const CheckboxComponent = forwardRef<
       onChange={field.onChange}
       data-testid={name}
       name={name}
-      isDisabled={registerOptions?.disabled}
+      isDisabled={registerOptions?.disabled || disabled}
       excludeFromTabOrder
     >
       {({ isSelected }) => (

packages/design-system/lib/components/Select/Select.tsx

@@ -25,6 +25,7 @@ export function Select({
   isDisabled,
   icon,
   itemIcon,
+  popoverWidth,
   ...props
 }: SelectProps | SelectFilterProps) {
   const [isOpen, setIsOpen] = useState(false)
@@ -88,7 +89,11 @@ export function Select({
         />
       </Button>
 
-      <Popover className={styles.popover} shouldFlip={false}>
+      <Popover
+        className={styles.popover}
+        style={popoverWidth ? { minWidth: popoverWidth } : undefined}
+        shouldFlip={false}
+      >
         <ListBox className={styles.listBox}>
           {items.map((item, idx) => (
             <SelectItem

packages/design-system/lib/components/Select/types.ts

@@ -18,6 +18,7 @@ export interface SelectProps extends ComponentProps<typeof Select> {
   label: string
   onSelectionChange?: (key: Key | null) => void
   enableFiltering?: false
+  popoverWidth?: string
 }
 
 export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
@@ -35,4 +36,5 @@ export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
   label: string
   onSelectionChange?: (key: Key | null) => void
   enableFiltering: true
+  popoverWidth?: string
 }