@seamapi/react 2.5.0 → 2.5.1

package/lib/seam/components/AccessCodeTable/AccessCodeRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeRow.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAA;AACpF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAEhF,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAA;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAUlD,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,EACP,UAAU,EACV,MAAM,EACN,qBAAqB,EACrB,uBAAuB,GACJ;IACnB,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,CAAA;IAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC/C,MAAM,QAAQ,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,GAAG,CAAC,CAAA;IACnD,MAAM,cAAc,GAAG,QAAQ;QAC7B,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,UAAU,EAAE;QACjC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,SAAS,EAAE,CAAA;IAClC,MAAM,gBAAgB,GAAG,QAAQ;QAC/B,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,UAAU,EAAE;QACnC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,SAAS,EAAE,CAAA;IAEpC,OAAO,CACL,MAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,aACxB,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,wBACE,KAAC,iBAAiB,KAAG,GACjB,GACI,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,IAAC,SAAS,EAAC,qBAAqB,YAAE,UAAU,CAAC,IAAI,GAAS,EAChE,KAAC,WAAW,IAAC,UAAU,EAAE,UAAU,GAAI,IAC7B,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,aACpC,UAAU,GAAG,CAAC,IAAI,CACjB,cAAK,SAAS,EAAC,sBAAsB,EAAC,KAAK,EAAE,cAAc,YACzD,KAAC,4BAA4B,KAAG,GAC5B,CACP,EACA,UAAU,KAAK,CAAC,IAAI,YAAY,GAAG,CAAC,IAAI,CACvC,cAAK,SAAS,EAAC,sBAAsB,EAAC,KAAK,EAAE,gBAAgB,YAC3D,KAAC,0BAA0B,KAAG,GAC1B,CACP,EACD,KAAC,cAAc,IACb,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,OAAO,EACtB,uBAAuB,EAAE,uBAAuB,EAChD,qBAAqB,EAAE,qBAAqB,GAC5C,IACQ,IACH,CACZ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,aAAa;CAC1B,CAAA"}
+{"version":3,"file":"AccessCodeRow.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAA;AACpF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,cAAc,EAAE,MAAM,uDAAuD,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,oDAAoD,CAAA;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAUlD,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,EACP,UAAU,EACV,MAAM,EACN,qBAAqB,EACrB,uBAAuB,GACJ;IACnB,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,CAAA;IAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC/C,MAAM,QAAQ,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,GAAG,CAAC,CAAA;IACnD,MAAM,cAAc,GAAG,QAAQ;QAC7B,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,UAAU,EAAE;QACjC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,SAAS,EAAE,CAAA;IAClC,MAAM,gBAAgB,GAAG,QAAQ;QAC/B,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,UAAU,EAAE;QACnC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,SAAS,EAAE,CAAA;IAEpC,OAAO,CACL,MAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,aACxB,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,KAAC,kBAAkB,IAAC,UAAU,EAAE,UAAU,GAAI,GACpC,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,IAAC,SAAS,EAAC,qBAAqB,YAAE,UAAU,CAAC,IAAI,GAAS,EAChE,KAAC,WAAW,IAAC,UAAU,EAAE,UAAU,GAAI,IAC7B,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,aACpC,UAAU,GAAG,CAAC,IAAI,CACjB,cACE,SAAS,EAAC,kDAAkD,EAC5D,KAAK,EAAE,cAAc,YAErB,KAAC,4BAA4B,KAAG,GAC5B,CACP,EACA,UAAU,KAAK,CAAC,IAAI,YAAY,GAAG,CAAC,IAAI,CACvC,cACE,SAAS,EAAC,kDAAkD,EAC5D,KAAK,EAAE,gBAAgB,YAEvB,KAAC,0BAA0B,KAAG,GAC1B,CACP,EACD,KAAC,cAAc,IACb,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,OAAO,EACtB,uBAAuB,EAAE,uBAAuB,EAChD,qBAAqB,EAAE,qBAAqB,GAC5C,IACQ,IACH,CACZ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,aAAa;CAC1B,CAAA"}

package/lib/seam/components/AccessCodeTable/CodeDetails.js

@@ -6,7 +6,7 @@ import { useIsDateInPast } from '../../../../lib/ui/use-is-date-in-past.js';
 export function CodeDetails(props) {
     const { accessCode } = props;
     const { device } = useDevice({ device_id: accessCode.device_id });
-    return (_jsxs("div", { className: 'seam-details', children: [_jsx("span", { className: 'seam-device-name seam-truncated-text', children: device?.properties.name }), _jsx(DotDivider, {}), _jsx(Duration, { accessCode: accessCode }), _jsx(DotDivider, {}), t.code, ": ", accessCode.code] }));
+    return (_jsxs("div", { className: 'seam-details', children: [_jsx("span", { className: 'seam-device-name seam-truncated-text', children: device?.properties.name }), _jsx(DotDivider, {}), _jsx(Duration, { accessCode: accessCode }), _jsx(DotDivider, {}), _jsxs("span", { className: 'seam-invisible seam-md-block', children: [t.code, ": "] }), accessCode.code] }));
 }
 function Duration(props) {
     const { accessCode } = props;

package/lib/seam/components/AccessCodeTable/CodeDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeDetails.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/AccessCodeTable/CodeDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAE/D,MAAM,UAAU,WAAW,CAAC,KAAiC;IAC3D,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC5B,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,CAAA;IAEjE,OAAO,CACL,eAAK,SAAS,EAAC,cAAc,aAC3B,eAAM,SAAS,EAAC,sCAAsC,YACnD,MAAM,EAAE,UAAU,CAAC,IAAI,GACnB,EACP,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,IAAC,UAAU,EAAE,UAAU,GAAI,EACpC,KAAC,UAAU,KAAG,EACb,CAAC,CAAC,IAAI,QAAI,UAAU,CAAC,IAAI,IACtB,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAAiC;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAE5B,MAAM,UAAU,GACd,eAAe,CAAC,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;QACzE,KAAK,CAAA;IAEP,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,EAAE;QACjC,OAAO,CACL,2BACG,CAAC,CAAC,IAAI,QAAI,CAAC,CAAC,KAAK,IACb,CACR,CAAA;KACF;IAED,IAAI,UAAU,EAAE;QACd,OAAO,CACL,2BACG,CAAC,CAAC,IAAI,QAAI,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,IACzC,CACR,CAAA;KACF;IAED,OAAO,CACL,2BACG,CAAC,CAAC,MAAM,QAAI,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,IACxC,CACR,CAAA;AACH,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE,CAC1C,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC;IACpC,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,SAAS;CACf,CAAC,CAAA;AAEJ,MAAM,CAAC,GAAG;IACR,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAA"}
+{"version":3,"file":"CodeDetails.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/AccessCodeTable/CodeDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAE/D,MAAM,UAAU,WAAW,CAAC,KAAiC;IAC3D,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC5B,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,CAAA;IAEjE,OAAO,CACL,eAAK,SAAS,EAAC,cAAc,aAC3B,eAAM,SAAS,EAAC,sCAAsC,YACnD,MAAM,EAAE,UAAU,CAAC,IAAI,GACnB,EACP,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,IAAC,UAAU,EAAE,UAAU,GAAI,EACpC,KAAC,UAAU,KAAG,EACd,gBAAM,SAAS,EAAC,8BAA8B,aAAE,CAAC,CAAC,IAAI,UAAU,EAC/D,UAAU,CAAC,IAAI,IACZ,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAAiC;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAE5B,MAAM,UAAU,GACd,eAAe,CAAC,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;QACzE,KAAK,CAAA;IAEP,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,EAAE;QACjC,OAAO,CACL,2BACG,CAAC,CAAC,IAAI,QAAI,CAAC,CAAC,KAAK,IACb,CACR,CAAA;KACF;IAED,IAAI,UAAU,EAAE;QACd,OAAO,CACL,2BACG,CAAC,CAAC,IAAI,QAAI,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,IACzC,CACR,CAAA;KACF;IAED,OAAO,CACL,2BACG,CAAC,CAAC,MAAM,QAAI,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,IACxC,CACR,CAAA;AACH,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE,CAC1C,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC;IACpC,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,SAAS;CACf,CAAC,CAAA;AAEJ,MAAM,CAAC,GAAG;IACR,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAA"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "2.5.0";
+declare const seamapiReactVersion = "2.5.1";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.5.0';
+const seamapiReactVersion = '2.5.1';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",

package/src/lib/seam/components/AccessCodeTable/AccessCodeMainIcon.tsx

@@ -0,0 +1,65 @@
+import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
+import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
+import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
+
+export interface AccessCodeMainIconProps {
+  accessCode: UseAccessCodesData[number]
+}
+
+export function AccessCodeMainIcon({
+  accessCode,
+}: AccessCodeMainIconProps): JSX.Element {
+  const errorCount = accessCode.errors.length
+  const warningCount = accessCode.warnings.length
+  const isPlural = errorCount === 0 || errorCount > 1
+  const errorIconTitle = isPlural
+    ? `${errorCount} ${t.codeIssues}`
+    : `${errorCount} ${t.codeIssue}`
+  const warningIconTitle = isPlural
+    ? `${warningCount} ${t.codeIssues}`
+    : `${warningCount} ${t.codeIssue}`
+
+  if (errorCount > 0) {
+    return (
+      <>
+        <div
+          className='seam-issue-icon-wrap seam-md-invisible'
+          title={errorIconTitle}
+        >
+          <ExclamationCircleOutlineIcon />
+        </div>
+        <div className='seam-invisible seam-md-flex'>
+          <AccessCodeKeyIcon />
+        </div>
+      </>
+    )
+  }
+
+  if (errorCount === 0 && warningCount > 0) {
+    return (
+      <>
+        <div
+          className='seam-issue-icon-wrap seam-md-invisible'
+          title={warningIconTitle}
+        >
+          <TriangleWarningOutlineIcon />
+        </div>
+        <div className='seam-invisible seam-md-flex'>
+          <AccessCodeKeyIcon />
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <div className='seam-issue-icon-wrap'>
+      <AccessCodeKeyIcon />
+    </div>
+  )
+}
+
+const t = {
+  codeIssue: 'code issue',
+  codeIssues: 'code issues',
+}

package/src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx

@@ -1,7 +1,7 @@
-import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
 import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeMainIcon } from 'lib/seam/components/AccessCodeTable/AccessCodeMainIcon.js'
 import { AccessCodeMenu } from 'lib/seam/components/AccessCodeTable/AccessCodeMenu.js'
 import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
 import { TableCell } from 'lib/ui/Table/TableCell.js'
@@ -36,9 +36,7 @@ export function AccessCodeRow({
   return (
     <TableRow onClick={onClick}>
       <TableCell className='seam-icon-cell'>
-        <div>
-          <AccessCodeKeyIcon />
-        </div>
+        <AccessCodeMainIcon accessCode={accessCode} />
       </TableCell>
       <TableCell className='seam-name-cell'>
         <Title className='seam-truncated-text'>{accessCode.name}</Title>
@@ -46,12 +44,18 @@ export function AccessCodeRow({
       </TableCell>
       <TableCell className='seam-action-cell'>
         {errorCount > 0 && (
-          <div className='seam-issue-icon-wrap' title={errorIconTitle}>
+          <div
+            className='seam-issue-icon-wrap seam-invisible seam-md-flex'
+            title={errorIconTitle}
+          >
             <ExclamationCircleOutlineIcon />
           </div>
         )}
         {errorCount === 0 && warningCount > 0 && (
-          <div className='seam-issue-icon-wrap' title={warningIconTitle}>
+          <div
+            className='seam-issue-icon-wrap seam-invisible seam-md-flex'
+            title={warningIconTitle}
+          >
             <TriangleWarningOutlineIcon />
           </div>
         )}

package/src/lib/seam/components/AccessCodeTable/CodeDetails.tsx

@@ -17,7 +17,8 @@ export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
       <DotDivider />
       <Duration accessCode={accessCode} />
       <DotDivider />
-      {t.code}: {accessCode.code}
+      <span className='seam-invisible seam-md-block'>{t.code}: </span>
+      {accessCode.code}
     </div>
   )
 }

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.5.0'
+const seamapiReactVersion = '2.5.1'
 
 export default seamapiReactVersion

package/src/styles/_main.scss

@@ -5,6 +5,7 @@
 @use './alert';
 @use './buttons';
 @use './layout';
+@use './visibility';
 @use './loading_toast';
 @use './colors';
 @use './icons';
@@ -41,6 +42,7 @@
   @include form-field.all;
   @include buttons.all;
   @include layout.all;
+  @include visibility.all;
   @include loading_toast.all;
   @include icons.all;
   @include menus.all;

package/src/styles/_seam-table.scss

@@ -27,11 +27,17 @@
         justify-content: center;
 
         > div {
-          width: 40px;
+          width: 32px;
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: center;
+          margin-right: 4px;
+
+          @media only screen and (width >= 768px) {
+            width: 40px;
+            margin-right: 4px;
+          }
         }
       }
 
@@ -48,10 +54,15 @@
         }
 
         .seam-details {
-          font-size: 14px;
+          font-size: 12px;
           line-height: 134%;
           color: colors.$text-gray-1;
           display: flex;
+          flex-wrap: wrap;
+
+          @media only screen and (width >= 768px) {
+            font-size: 14px;
+          }
 
           .seam-device-name {
             max-width: 190px;
@@ -66,10 +77,14 @@
       }
 
       .seam-action-cell {
-        margin-right: 12px;
+        margin-right: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
+
+        @media only screen and (width >= 768px) {
+          margin-right: 12px;
+        }
       }
 
       .seam-issue-icon-wrap {

package/src/styles/_visibility.scss

@@ -0,0 +1,25 @@
+@use './colors';
+
+@mixin all {
+  .seam-invisible {
+    display: none !important;
+  }
+
+  .seam-md-flex {
+    @media only screen and (width >= 768px) {
+      display: flex !important;
+    }
+  }
+
+  .seam-md-block {
+    @media only screen and (width >= 768px) {
+      display: block !important;
+    }
+  }
+
+  .seam-md-invisible {
+    @media only screen and (width >= 768px) {
+      display: none !important;
+    }
+  }
+}