@licklist/design 0.70.6-dev.0 → 0.70.7

package/src/date-time-button/DateTimeButton.tsx

@@ -2,7 +2,6 @@ import { ReactElement } from 'react'
 import clsx from 'clsx'
 import { DateTime } from 'luxon'
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
-import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
 import { AvailabilityIndicator } from '../availability-indicator'
 import { DateContent } from './DateContent'
 
@@ -22,7 +21,6 @@ export type DateTimeButtonProps = {
   resources?: ZoneResourcesAvailability | null
   showResources?: boolean
   variant: Variant
-  availabilityFormat?: AvailabilityFormat | null
 }
 
 export const DateTimeButton = ({
@@ -35,7 +33,6 @@ export const DateTimeButton = ({
   resources,
   showResources,
   variant = Variant.week,
-  availabilityFormat,
 }: DateTimeButtonProps) => {
   const isSoldOut =
     _isSoldOut ||
@@ -46,7 +43,7 @@ export const DateTimeButton = ({
   const isPast = variant === Variant.time ? isPastTime(date) : isPastDate(date)
 
   const isDisabled = _isDisabled || isSoldOut || isPast
-  const isUnavailable = _isDisabled || isPast
+
   return (
     <button
       type='button'
@@ -70,11 +67,10 @@ export const DateTimeButton = ({
         variant={variant}
       />
       {price && !isDisabled && <div className='price'>{price}</div>}
-      {showResources && (resources || isUnavailable) && (
+      {showResources && resources && (
         <AvailabilityIndicator
-          availabilityFormat={availabilityFormat}
           resources={resources}
-          isUnavailable={isUnavailable}
+          isUnavailable={_isDisabled || isPast}
           isSoldOut={isSoldOut}
         />
       )}

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -39,6 +39,7 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
+                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -49,7 +49,6 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
     },
     ref,
   ) => {
-    // TODO fix often updating of canvasSizes, which leads to flashing poingts
     const canvasSizes = useCanvasSize({ width, height })
 
     return (

package/src/events/event-venue-map/hooks/useCanvasSize.ts

@@ -10,17 +10,13 @@ export const useCanvasSize = ({
   width: componentWidth,
   height: componentHeight,
 }: CanvasSizeProps) => {
-  // TODO Fix often updating of width and height
   const { width, height } = useWindowDimensions()
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const memoizedDimensions = useMemo(() => ({ width, height }), [width])
-
   const memoedComponentParameters = useMemo(() => {
     if (!componentWidth && !componentHeight) return null
 
     return { width: componentWidth, height: componentHeight }
   }, [componentWidth, componentHeight])
 
-  return memoedComponentParameters || memoizedDimensions
+  return memoedComponentParameters || { width, height }
 }

package/src/iframe/activity-card/ActivityCard.tsx

@@ -2,7 +2,6 @@ import { ReactNode } from 'react'
 import clsx from 'clsx'
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
-import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
 import { AvailabilityIndicator } from '../../availability-indicator'
 
 export const LAYOUT_GRID = 'grid'
@@ -19,7 +18,6 @@ export type ActivityCardProps = {
   availableTimes?: string | null
   image?: Image | null
   resources?: ZoneResourcesAvailability
-  availabilityFormat?: AvailabilityFormat | null
 }
 
 export const ActivityCard = ({
@@ -32,7 +30,6 @@ export const ActivityCard = ({
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
-  availabilityFormat,
   resources,
 }: ActivityCardProps) => {
   if (layout === LAYOUT_GRID) {
@@ -53,12 +50,7 @@ export const ActivityCard = ({
           {description && (
             <div className='mt-2 activity-card-description'>{description}</div>
           )}
-          {resources && (
-            <AvailabilityIndicator
-              resources={resources}
-              availabilityFormat={availabilityFormat}
-            />
-          )}
+          {resources && <AvailabilityIndicator resources={resources} />}
         </div>
       </button>
     )
@@ -84,12 +76,7 @@ export const ActivityCard = ({
         {description && (
           <div className='mt-2 activity-card-description'>{description}</div>
         )}
-        {resources && (
-          <AvailabilityIndicator
-            resources={resources}
-            availabilityFormat={availabilityFormat}
-          />
-        )}
+        {resources && <AvailabilityIndicator resources={resources} />}
       </div>
 
       <hr className='list-activity-card-hr' />

package/src/iframe/event/ticket-description/TicketDescription.tsx

@@ -30,6 +30,7 @@ export function TicketDescription({
   canExpand = true,
 }: TicketDescriptionProps) {
   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
+  const showDescription = !!description
 
   const wrapperClasses = clsx('ticket-description', className)
 
@@ -41,6 +42,24 @@ export function TicketDescription({
     '--description-wrapper-height': 'inherit',
   } as CSSProperties
 
+  const renderDescription = () => (
+    <div className='description-content'>
+      <div className='d-flex flex-column'>
+        <div className='product-title'>
+          {title} {isRequired && <span>*</span>}
+        </div>
+        {showDescription && (
+          <TipTapEditor
+            viewMode
+            disabled
+            content={description}
+            editorStyle={{ backgroundColor: 'transparent' }}
+          />
+        )}
+      </div>
+    </div>
+  )
+
   return (
     <div className={wrapperClasses}>
       <div
@@ -59,46 +78,14 @@ export function TicketDescription({
               isExpanded={isDescriptionExpanded}
               setIsExpanded={setIsDescriptionExpanded}
             >
-              <Description
-                title={title}
-                isRequired={isRequired}
-                description={description}
-              />
+              {renderDescription()}
             </TextExpand>
           ) : (
-            <Description
-              title={title}
-              isRequired={isRequired}
-              description={description}
-            />
+            renderDescription()
           )}
         </div>
       </div>
-      {price && <div className={clsx({ 'mt-5': description })}>{price}</div>}
+      {price && <div className={clsx(showDescription && 'mt-5')}>{price}</div>}
     </div>
   )
 }
-
-const Description = ({
-  title,
-  isRequired,
-  description,
-}: Pick<TicketDescriptionProps, 'title' | 'isRequired' | 'description'>) => (
-  <div className='description-content'>
-    <div className='d-flex flex-column'>
-      <div className='product-title'>
-        {title} {isRequired && <span>*</span>}
-      </div>
-
-      {!!description && (
-        <TipTapEditor
-          viewMode
-          disabled
-          content={description}
-          editorStyle={{ backgroundColor: 'transparent' }}
-          hideEmptyEditor
-        />
-      )}
-    </div>
-  </div>
-)

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -89,7 +89,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <FormControl
           type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
-          onWheel={(event) => event.currentTarget.blur()}
           value={value}
           min={0}
           max={max}
@@ -102,14 +101,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type='button'
           onClick={handleArrowUpClick}
-          onWheel={(event) => event.currentTarget.blur()}
-          onFocus={(event) =>
-            event.target.addEventListener(
-              'wheel',
-              (event) => event.preventDefault(),
-              { passive: false },
-            )
-          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -61,7 +61,6 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
-
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -33,11 +33,6 @@ export const ryftErrorMap: Record<string, string> = {
 
 export type RyftPaymentFormValues = Record<string, never>
 
-interface GoogleAndApplePayResponse {
-  paymentSession: AttemptPaymentResponse
-  eventName: string
-}
-
 export interface RyftPaymentFormProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   accountId: any
@@ -94,10 +89,10 @@ export const RyftPaymentForm = ({
     setReferrerBeforePayment()
   }
 
-  const handleSubmit = async (_paymentSession?: AttemptPaymentResponse) => {
+  const handleSubmit = async () => {
     setIsBtnDisabled(true)
     try {
-      const paymentSession = _paymentSession || (await onSubmit())
+      const paymentSession = await onSubmit()
 
       if (!paymentSession) {
         setRyftError('unknown_error')
@@ -169,12 +164,6 @@ export const RyftPaymentForm = ({
         addEventHandler('cardValidationChanged', (e: MessageEvent['data']) => {
           setIsValid(e.isValid)
         })
-        addEventHandler(
-          'walletPaymentSessionResult',
-          (e: MessageEvent<GoogleAndApplePayResponse>['data']) => {
-            handleSubmit(e.paymentSession)
-          },
-        )
 
         setRyftInitFailure(false)
       },
@@ -229,7 +218,7 @@ export const RyftPaymentForm = ({
         ref={formRef}
         id='ryft-pay-form'
         noValidate
-        onSubmit={methods.handleSubmit(() => handleSubmit())}
+        onSubmit={methods.handleSubmit(handleSubmit)}
         className='ryft-payment-form'
       >
         <div className='form-disable-box' id='form-disable-box' />

package/src/iframe/ryft/utils/ryft-form.ts

@@ -61,22 +61,20 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
-  const payIframe = document.getElementById('ryft-pay-iframe')
+  const payIframe = document.getElementById("ryft-pay-iframe");
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? 'block' : 'none'
+      formBox.style.display = isDisableButton ? "block" : "none"
     }
 
     const googleButton = document.getElementById(
       'gpay-button-online-api-id',
     ) as HTMLButtonElement
-    const appleButton = document.getElementById(
-      'ryft-pay-apple-pay-button',
-    ) as HTMLButtonElement
+    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -88,6 +86,7 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
+    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -434,7 +434,6 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
-                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -8,7 +8,6 @@ import {
   useFormContext,
   useWatch,
 } from 'react-hook-form'
-import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from 'react-icons/fa'
 import { useTranslation } from 'react-i18next'
 import { useSensor, MouseSensor } from '@dnd-kit/core'
 import {
@@ -26,11 +25,7 @@ import { ProductCategoryControl } from '../product-category'
 import { ProductCategory } from '../types'
 import { ProductsControl } from './ProductsControl'
 import { ProductSetFormValues, WithIsLoading } from './ProductSetForm'
-import {
-  SelectCategoryModal,
-  CATEGORY_TYPES_NAMES,
-  CategoryConfig,
-} from './SelectCategoryModal'
+import { SelectCategoryModal } from './SelectCategoryModal'
 import { ProductSetLoadingContext } from './context'
 import { VenueMapSetModal } from './VenueMapSetModal'
 import { moveArrayElements, sortArrayByIndex } from '../utils'
@@ -38,29 +33,6 @@ import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
-const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
-  [CATEGORY_TYPES_NAMES.tickets]: {
-    label: 'tickets',
-    icon: <FaTicketAlt color='#0e8ce2' size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.bookings]: {
-    label: 'bookings',
-    icon: <FaCalendar color='#0e8ce2' size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.menuItems]: {
-    label: 'menuItems',
-    icon: <FaBars color='#0e8ce2' size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.game]: {
-    label: 'game',
-    icon: <FaBowlingBall color='#0e8ce2' size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.fixedDuration]: {
-    label: 'fixedDuration',
-    icon: <FaCalendar color='#0e8ce2' size={10} />,
-  },
-}
-
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number
   isOverrides?: boolean
@@ -256,8 +228,6 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
-          const categoryType = CATEGORIES_TYPE[productCategory.type]
-
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -302,12 +272,6 @@ export function ProductCategoriesControl({
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
-                  itemButton={
-                    <div className='btn-outline-primary item-icon sm border border-primary rounded-sm'>
-                      {categoryType.icon}
-                      <span className='ml-2'>{t(categoryType.label)}</span>
-                    </div>
-                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}

package/src/product-set/form/ProductSetForm.tsx

@@ -12,7 +12,7 @@ import { isEqual } from 'lodash'
 import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
-import { transformErrorToMessage } from '@licklist/plugins/dist/utils/error'
+import { transformErrorToMessage } from '@licklist/plugins'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -28,16 +28,12 @@ import { ErrorModal } from '../../iframe/order-process/components/ErrorModal'
 export interface WithIsLoading {
   isLoading: boolean
 }
-export interface WithIdOptional {
-  id?: number
-}
-
 export interface WithId {
   id: number
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean

package/src/product-set/form/ProductZonesControl.tsx

@@ -1,4 +1,7 @@
-import { useContext, useState } from 'react'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React, { useContext, useState } from 'react'
+
 import {
   ArrayPath,
   Controller,

package/src/product-set/form/SelectCategoryModal.tsx

@@ -25,7 +25,7 @@ import {
 } from 'react-icons/fa'
 import { ProductSetLoadingContext } from './context'
 
-export const CATEGORY_TYPES_NAMES = {
+const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,7 +33,7 @@ export const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const
 
-export type CategoryConfig = { label: string; icon: ReactElement }
+type CategoryConfig = { label: string; icon: ReactElement }
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {

package/src/product-set/form/SubProductsControl.tsx

@@ -70,6 +70,9 @@ export function SubProductsControl({
                   images: subProducts[index]?.images as Image[],
                 }
                 // @ts-expect-error TS2345
+                // @TODO fix prod type error
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 append(subProductCopy)
               }}
             />

package/src/product-set/form/VenueMapsControl.tsx

@@ -46,6 +46,9 @@ export const VenueMapsControl = ({
                             url={image.url}
                             name={name}
                             points={points}
+                            // @TODO fix prod type error
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
                             products={products}
                             pointProducts={pointProducts}
                             onPointProductsChange={onPointProductsChange}

package/src/product-set/product/ProductControl.tsx

@@ -34,6 +34,7 @@ import {
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import React, { useContext } from 'react'
 import { Col, Form } from 'react-bootstrap'
 import { Controller, Path, useFormContext } from 'react-hook-form'
 import { HookFormService } from '@licklist/plugins'

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -86,7 +86,6 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -130,7 +129,6 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 min='0'
                 step='1'
                 value={value as string}

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -50,7 +50,6 @@ export function ProductDepositControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
-                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
                 step='0.01'

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -91,7 +91,6 @@ export const ProductDurationControl = <T,>({
                 <Form.Control
                   type='number'
                   min={0}
-                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -128,7 +127,6 @@ export const ProductDurationControl = <T,>({
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -59,7 +59,6 @@ export function ProductPriceControl<T extends FormValues>({
                 ref={ref}
                 type='number'
                 min={0}
-                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
                 step='0.01'
                 value={value as string}

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -111,7 +111,6 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -166,7 +165,6 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -85,7 +85,6 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -144,7 +143,6 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -69,7 +69,6 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type='number'
                 min={0}
                 step={1}
-                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -216,7 +216,6 @@ export function ProductCategoryControl({
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
-                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -289,7 +288,6 @@ export function ProductCategoryControl({
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
-                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -350,7 +348,6 @@ export function ProductCategoryControl({
                       min={0}
                       step={1}
                       type='number'
-                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -533,7 +530,6 @@ export function ProductCategoryControl({
                       step={1}
                       value={value}
                       onChange={onChange}
-                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo } from 'react'
+import React, { useContext, useEffect, useMemo } from 'react'
 import { Col, Form, Row } from 'react-bootstrap'
 import {
   ArrayPath,

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -109,7 +109,6 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
-                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}