@seamapi/react 1.60.3 → 1.60.4

package/lib/ui/LoadingToast/LoadingToast.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { CheckBlackIcon } from '../../../lib/icons/CheckBlack.js';
+import { Spinner } from '../../../lib/ui/Spinner/Spinner.js';
+export function LoadingToast({ isLoading = true, label, top, left, }) {
+    const [hidden, setHidden] = useState(false);
+    useEffect(() => {
+        if (!isLoading) {
+            const timeout = globalThis.setTimeout(() => {
+                setHidden(true);
+            }, 1000);
+            return () => {
+                globalThis.clearTimeout(timeout);
+            };
+        }
+        setHidden(false);
+        return () => {
+            // noop
+        };
+    }, [isLoading]);
+    return (_jsxs("div", { className: classNames('seam-loading-toast', {
+            'seam-loading-toast-hide': hidden,
+        }), style: { top, left }, children: [_jsx("div", { className: 'seam-loading-toast-icon-wrap', children: isLoading ? _jsx(Spinner, { size: 'small' }) : _jsx(CheckBlackIcon, {}) }), _jsx("p", { className: 'seam-loading-toast-text', children: label })] }));
+}
+//# sourceMappingURL=LoadingToast.js.map

package/lib/ui/LoadingToast/LoadingToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingToast.js","sourceRoot":"","sources":["../../../src/lib/ui/LoadingToast/LoadingToast.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AASnD,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,GAAG,IAAI,EAChB,KAAK,EACL,GAAG,EACH,IAAI,GACc;IAClB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,EAAE;YACd,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,GAAG,EAAE;gBACzC,SAAS,CAAC,IAAI,CAAC,CAAA;YACjB,CAAC,EAAE,IAAI,CAAC,CAAA;YAER,OAAO,GAAG,EAAE;gBACV,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;YAClC,CAAC,CAAA;SACF;QAED,SAAS,CAAC,KAAK,CAAC,CAAA;QAEhB,OAAO,GAAG,EAAE;YACV,OAAO;QACT,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;YAC1C,yBAAyB,EAAE,MAAM;SAClC,CAAC,EACF,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,aAEpB,cAAK,SAAS,EAAC,8BAA8B,YAC1C,SAAS,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,GACtD,EACN,YAAG,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAK,IAC9C,CACP,CAAA;AACH,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.60.3";
+declare const seamapiReactVersion = "1.60.4";
 export default seamapiReactVersion;

package/lib/version.js

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

package/package.json

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

package/src/lib/icons/Search.tsx

@@ -7,15 +7,15 @@ export function SearchIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={20}
-      height={20}
+      width={24}
+      height={25}
       fill='none'
       {...props}
     >
       <mask
         id='search_svg__a'
-        width={20}
-        height={20}
+        width={24}
+        height={25}
         x={0}
         y={0}
         maskUnits='userSpaceOnUse'
@@ -23,12 +23,12 @@ export function SearchIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
           maskType: 'alpha',
         }}
       >
-        <path fill='#D9D9D9' d='M0 0h20v20H0z' />
+        <path fill='#D9D9D9' d='M0 .988h24v24H0z' />
       </mask>
       <g mask='url(#search_svg__a)'>
         <path
-          fill='#6E7179'
-          d='m16.333 17.5-5.25-5.25a5.08 5.08 0 0 1-3.167 1.083c-1.513 0-2.794-.524-3.843-1.572C3.024 10.71 2.5 9.43 2.5 7.917c0-1.514.524-2.796 1.573-3.845C5.122 3.024 6.403 2.5 7.917 2.5c1.514 0 2.795.524 3.844 1.572 1.048 1.05 1.572 2.33 1.572 3.845a5.08 5.08 0 0 1-1.083 3.166l5.25 5.25-1.167 1.167Zm-8.416-5.833c1.041 0 1.927-.365 2.656-1.094.73-.73 1.094-1.615 1.094-2.656 0-1.042-.365-1.928-1.094-2.657-.73-.729-1.615-1.093-2.656-1.093-1.042 0-1.928.364-2.657 1.093-.729.73-1.093 1.615-1.093 2.657 0 1.041.364 1.927 1.093 2.656.73.73 1.615 1.094 2.657 1.094Z'
+          fill='#232B3A'
+          d='m19.6 21.988-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.629-4.612-1.887C3.629 13.843 3 12.305 3 10.488c0-1.816.63-3.354 1.888-4.613C6.146 4.617 7.683 3.988 9.5 3.988c1.817 0 3.354.63 4.613 1.887C15.371 7.134 16 8.672 16 10.488a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.437 3.188-1.312S14 11.738 14 10.488c0-1.25-.437-2.312-1.312-3.188-.875-.874-1.938-1.312-3.188-1.312-1.25 0-2.313.438-3.188 1.312C5.437 8.176 5 9.238 5 10.488c0 1.25.437 2.313 1.312 3.188S8.25 14.988 9.5 14.988Z'
         />
       </g>
     </svg>

package/src/lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.tsx

@@ -28,5 +28,5 @@ export function ShowAllDevicesButton({
 
 const t = {
   showLess: 'Show less',
-  showAll: (count: number) => `See all ${count} devices`,
+  showAll: (count: number) => `See all ${count}`,
 }

package/src/lib/ui/LoadingToast/LoadingToast.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+
+import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
+import { Spinner } from 'lib/ui/Spinner/Spinner.js'
+
+interface LoadingToastProps {
+  isLoading: boolean
+  label: string
+  top?: number
+  left?: number
+}
+
+export function LoadingToast({
+  isLoading = true,
+  label,
+  top,
+  left,
+}: LoadingToastProps): JSX.Element {
+  const [hidden, setHidden] = useState(false)
+
+  useEffect(() => {
+    if (!isLoading) {
+      const timeout = globalThis.setTimeout(() => {
+        setHidden(true)
+      }, 1000)
+
+      return () => {
+        globalThis.clearTimeout(timeout)
+      }
+    }
+
+    setHidden(false)
+
+    return () => {
+      // noop
+    }
+  }, [isLoading])
+
+  return (
+    <div
+      className={classNames('seam-loading-toast', {
+        'seam-loading-toast-hide': hidden,
+      })}
+      style={{ top, left }}
+    >
+      <div className='seam-loading-toast-icon-wrap'>
+        {isLoading ? <Spinner size='small' /> : <CheckBlackIcon />}
+      </div>
+      <p className='seam-loading-toast-text'>{label}</p>
+    </div>
+  )
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.60.3'
+const seamapiReactVersion = '1.60.4'
 
 export default seamapiReactVersion

package/src/styles/_inputs.scss

@@ -1,9 +1,20 @@
 @use './colors';
 @use './typography';
 
+@mixin search-text-field {
+  .seam-search-text-field {
+    svg {
+      * {
+        fill: colors.$text-gray-2;
+      }
+    }
+  }
+}
+
 @mixin text-field {
   .seam-text-field {
     > .seam-main {
+      background: colors.$white;
       border: 1px solid colors.$text-gray-3;
       border-radius: 8px;
       display: flex;
@@ -24,6 +35,7 @@
       border: 0;
       width: 100%;
       border-radius: 8px;
+      font-size: 16px;
 
       @include typography.font-family;
 
@@ -92,7 +104,6 @@
 
         > .seam-text-field-input {
           height: 48px;
-          font-size: 16px;
         }
       }
     }
@@ -111,4 +122,5 @@
 
 @mixin all {
   @include text-field;
+  @include search-text-field;
 }

package/src/styles/_loading_toast.scss

@@ -0,0 +1,59 @@
+@use './colors';
+
+@keyframes scale-in {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@mixin all {
+  .seam-loading-toast {
+    height: 32px;
+    padding: 0 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    border-radius: 6px;
+    background: colors.$bg-a;
+    box-shadow:
+      0 1px 5px 0 rgb(24 29 37 / 6%),
+      0 0 1px 0 rgb(24 29 37 / 25%);
+    gap: 8px;
+    will-change: transform;
+    animation: scale-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+    pointer-events: none;
+    position: absolute;
+    z-index: 9;
+
+    &.seam-loading-toast-hide {
+      transform: scale(0.5);
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .seam-loading-toast-icon-wrap {
+      width: 18px;
+      height: 18px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .seam-loading-toast-text {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1;
+      white-space: nowrap;
+    }
+  }
+}

package/src/styles/_main.scss

@@ -5,6 +5,7 @@
 @use './alert';
 @use './buttons';
 @use './layout';
+@use './loading_toast';
 @use './colors';
 @use './icons';
 @use './menus';
@@ -38,6 +39,7 @@
   @include form-field.all;
   @include buttons.all;
   @include layout.all;
+  @include loading_toast.all;
   @include icons.all;
   @include menus.all;
   @include checkbox.all;

package/src/styles/_spinner.scss

@@ -18,7 +18,7 @@
     width: $default-size;
     height: $default-size;
     border: $default-border-width solid colors.$primary;
-    border-top: $default-border-width solid colors.$white;
+    border-top: $default-border-width solid transparent;
     display: inline-block;
     border-radius: 50%;
     animation: spin 0.5s linear infinite;

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

@@ -126,9 +126,9 @@ $row-padding: 8px;
       background: colors.$white;
       display: flex;
       height: 30px;
-      padding: 4px 24px;
+      padding: 5px 24px 4px 16px;
       align-items: center;
-      gap: 10px;
+      gap: 2px;
       font-size: 14px;
       line-height: 115%;
       color: colors.$text-gray-1;