@seamapi/react 2.10.1 → 2.11.0

package/src/lib/ui/AccessCodeForm/AccessCodeForm.tsx

@@ -176,6 +176,9 @@ function Content({
       ? t.codeLengthRequirement(codeLengthRequirement)
       : null
 
+  const hasCodeInputs =
+    accessCode?.type !== 'time_bound' || accessCode.is_offline_access_code
+
   return (
     <>
       <ContentHeader
@@ -207,77 +210,81 @@ function Content({
               }}
             />
           </FormField>
-          <FormField className='seam-code-field'>
-            <InputLabel>{t.codeInputLabel}</InputLabel>
-            <TextField
-              size='large'
-              clearable
-              hasError={hasCodeError}
-              helperText={responseErrors?.code ?? errors.code?.message}
-              inputProps={{
-                ...register('code', {
-                  required: t.codeRequiredError,
-                  validate: (value: string) =>
-                    validateCodeLength(device, value),
-                }),
-              }}
-            />
-            <div
-              className={classNames('seam-bottom', {
-                'has-hints': codeLengthRequirementMessage != null,
-              })}
-            >
-              {codeLengthRequirementMessage != null && (
-                <ul
-                  className={classNames('seam-requirements', {
-                    'seam-error': hasCodeError,
-                  })}
-                >
-                  <li>{codeLengthRequirementMessage}</li>
-                  <li>{t.codeNumbersOnlyRequirement}</li>
-                </ul>
-              )}
-              <Button
-                size='small'
-                onMouseDown={(e) => {
-                  e.preventDefault() // Disable stealing input focus
-                  handleGenerateCode()
-                }}
-                disabled={isGeneratingCode}
-              >
-                {t.codeGenerateButton}
-              </Button>
-            </div>
-          </FormField>
-          <FormField>
-            <InputLabel>{t.timingInputLabel}</InputLabel>
-            <RadioField
-              value={type}
-              onChange={setType}
-              name='type'
-              options={[
-                {
-                  label: t.typeOngoingLabel,
-                  value: 'ongoing',
-                },
-                {
-                  label: t.typeTimeBoundLabel,
-                  value: 'time_bound',
-                },
-              ]}
-            />
+          {hasCodeInputs && (
             <>
-              {type === 'time_bound' && (
-                <AccessCodeFormTimes
-                  startDate={startDate}
-                  endDate={endDate}
-                  onEdit={() => {
-                    setDatePickerVisible(true)
+              <FormField className='seam-code-field'>
+                <InputLabel>{t.codeInputLabel}</InputLabel>
+                <TextField
+                  size='large'
+                  clearable
+                  hasError={hasCodeError}
+                  helperText={responseErrors?.code ?? errors.code?.message}
+                  inputProps={{
+                    ...register('code', {
+                      required: t.codeRequiredError,
+                      validate: (value: string) =>
+                        validateCodeLength(device, value),
+                    }),
                   }}
                 />
-              )}
+                <div
+                  className={classNames('seam-bottom', {
+                    'has-hints': codeLengthRequirementMessage != null,
+                  })}
+                >
+                  {codeLengthRequirementMessage != null && (
+                    <ul
+                      className={classNames('seam-requirements', {
+                        'seam-error': hasCodeError,
+                      })}
+                    >
+                      <li>{codeLengthRequirementMessage}</li>
+                      <li>{t.codeNumbersOnlyRequirement}</li>
+                    </ul>
+                  )}
+                  <Button
+                    size='small'
+                    onMouseDown={(e) => {
+                      e.preventDefault() // Disable stealing input focus
+                      handleGenerateCode()
+                    }}
+                    disabled={isGeneratingCode}
+                  >
+                    {t.codeGenerateButton}
+                  </Button>
+                </div>
+              </FormField>
+              <FormField>
+                <InputLabel>{t.timingInputLabel}</InputLabel>
+                <RadioField
+                  value={type}
+                  onChange={setType}
+                  name='type'
+                  options={[
+                    {
+                      label: t.typeOngoingLabel,
+                      value: 'ongoing',
+                    },
+                    {
+                      label: t.typeTimeBoundLabel,
+                      value: 'time_bound',
+                    },
+                  ]}
+                />
+                <>
+                  {type === 'time_bound' && (
+                    <AccessCodeFormTimes
+                      startDate={startDate}
+                      endDate={endDate}
+                      onEdit={() => {
+                        setDatePickerVisible(true)
+                      }}
+                    />
+                  )}
+                </>
+              </FormField>
             </>
-          </FormField>
+          )}
           {responseErrors?.unknown != null && (
             <div className='seam-unknown-error'>{responseErrors?.unknown}</div>
           )}

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx

@@ -7,9 +7,8 @@ import {
   isThermostatDevice,
 } from 'seamapi'
 
-import { useDevice } from 'lib/index.js'
-
 import { getSystemTimeZone } from 'lib/dates.js'
+import { useDevice } from 'lib/index.js'
 import { ClimateSettingScheduleFormClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js'
 import { ClimateSettingScheduleFormDefaultClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDefaultClimateSetting.js'
 import { ClimateSettingScheduleFormDeviceSelect } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.js'

package/src/lib/ui/FormField.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { cloneElement, useRef } from 'react'
+import { type Attributes, cloneElement, useRef } from 'react'
 
 import { DateTimePicker } from 'lib/ui/DateTimePicker/DateTimePicker.js'
 import { InputLabel } from 'lib/ui/InputLabel.js'
@@ -27,7 +27,7 @@ export function FormField({
   // Map children to automatically focus on input when clicking
   // on an InputLabel.
   const clonedChildren = components.map((component, index) => {
-    const baseProps = {
+    const baseProps: Attributes = {
       ...component.props,
       key: index,
     }

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.10.1'
+const seamapiReactVersion = '2.11.0'
 
 export default seamapiReactVersion

package/src/styles/_supported-device-table.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use './colors';
 
 $row-height: 64px;
@@ -175,7 +176,11 @@ $see-all-button-height: 30px;
         0 1px 1px 0 rgb(16 27 37 / 10%),
         0 1px 8px 0 rgb(46 69 82 / 12%);
       position: absolute;
-      bottom: -($row-height - $see-all-button-height - $row-padding) / 2;
+      bottom: math.div(
+          -($row-height - $see-all-button-height - $row-padding),
+          2
+        )
+        or calc(-1 * ($row-height - $see-all-button-height - $row-padding) / 2);
       left: 50%;
       transform: translate(-50%, -47px);
       z-index: 3;