@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -1,14 +1,8 @@
-import Drawer from '../ui/Drawer';
+import { Drawer, Checkbox, Button, Slider, Tooltip } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
-import Checkbox from '../ui/Checkbox';
-import Select from '../ui/Select';
 import { setLocalConfig } from '../../helpers/configuration';
-import { RadioGroup, Switch } from '@headlessui/react';
-import Button from '../ui/Button';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
 import { useState } from 'react';
-import Slider from '../ui/Slider';
-import Tooltip from '../ui/Tooltip';
 export interface Props {
   open: boolean;
   layout?: WidgetProps['layout'];
@@ -84,7 +78,7 @@ const SettingsDrawer = ({
             className="memori-settings-drawer--microphoneMode-radio-button"
           >
             {({ checked }) => (
-              <Button primary={checked} outlined={!checked}>
+              <Button variant={checked ? 'primary' : 'outline'}>
                 {t('write_and_speak.holdToSpeak') || 'Hold to speak'}
               </Button>
             )}
@@ -100,8 +94,7 @@ const SettingsDrawer = ({
             >
               {({ checked }) => (
                 <Button
-                  primary={checked}
-                  outlined={!checked}
+                  variant={checked ? 'primary' : 'outline'}
                   disabled={true}
                 >
                   {t('write_and_speak.continuousSpeechLabel') ||
@@ -134,38 +127,36 @@ const SettingsDrawer = ({
             <label htmlFor="#controlsPosition">
               {t('write_and_speak.controlsPosition') || 'Controls'}:
             </label>
-            <RadioGroup
+            <div
               id="controlsPosition"
-              name="controlsPosition"
-              value={controlsPosition}
-              defaultValue={controlsPosition}
               className="memori-settings-drawer--controlsposition-radio"
-              onChange={(value: any) => {
-                setControlsPosition(value);
-                setLocalConfig('controlsPosition', value);
-              }}
+              role="radiogroup"
             >
-              <RadioGroup.Option
-                value="center"
+              <Button
+                role="radio"
+                aria-checked={controlsPosition === 'center'}
+                variant={controlsPosition === 'center' ? 'primary' : 'outline'}
                 className="memori-settings-drawer--controlsposition-radio-button"
+                onClick={() => {
+                  setControlsPosition('center');
+                  setLocalConfig('controlsPosition', 'center');
+                }}
               >
-                {({ checked }) => (
-                  <Button primary={checked} outlined={!checked}>
-                    {t('center') || 'Center'}
-                  </Button>
-                )}
-              </RadioGroup.Option>
-              <RadioGroup.Option
-                value="bottom"
+                {t('center') || 'Center'}
+              </Button>
+              <Button
+                role="radio"
+                aria-checked={controlsPosition === 'bottom'}
+                variant={controlsPosition === 'bottom' ? 'primary' : 'outline'}
                 className="memori-settings-drawer--controlsposition-radio-button"
+                onClick={() => {
+                  setControlsPosition('bottom');
+                  setLocalConfig('controlsPosition', 'bottom');
+                }}
               >
-                {({ checked }) => (
-                  <Button primary={checked} outlined={!checked}>
-                    {t('bottom') || 'Bottom'}
-                  </Button>
-                )}
-              </RadioGroup.Option>
-            </RadioGroup>
+                {t('bottom') || 'Bottom'}
+              </Button>
+            </div>
           </div>
 
           {isAvatar3d && (
@@ -177,38 +168,36 @@ const SettingsDrawer = ({
                 >
                   {t('write_and_speak.avatarType') || 'Avatar type'}:
                 </label>
-                <RadioGroup
+                <div
                   id="avatarType"
-                  name="avatarType"
-                  value={avatarType}
-                  defaultValue={avatarType}
                   className="memori-settings-drawer--avatarType-radio"
-                  onChange={(value: any) => {
-                    setAvatarType && setAvatarType(value);
-                    setLocalConfig('avatarType', value);
-                  }}
+                  role="radiogroup"
                 >
-                  <RadioGroup.Option
-                    value="blob"
+                  <Button
+                    role="radio"
+                    aria-checked={avatarType === 'blob'}
+                    variant={avatarType === 'blob' ? 'primary' : 'outline'}
                     className="memori-settings-drawer--avatarType-radio-button"
+                    onClick={() => {
+                      setAvatarType?.('blob');
+                      setLocalConfig('avatarType', 'blob');
+                    }}
                   >
-                    {({ checked }) => (
-                      <Button primary={checked} outlined={!checked}>
-                        {t('write_and_speak.blob') || 'Blob'}
-                      </Button>
-                    )}
-                  </RadioGroup.Option>
-                  <RadioGroup.Option
-                    value="avatar3d"
+                    {t('write_and_speak.blob') || 'Blob'}
+                  </Button>
+                  <Button
+                    role="radio"
+                    aria-checked={avatarType === 'avatar3d'}
+                    variant={avatarType === 'avatar3d' ? 'primary' : 'outline'}
                     className="memori-settings-drawer--avatarType-radio-button"
+                    onClick={() => {
+                      setAvatarType?.('avatar3d');
+                      setLocalConfig('avatarType', 'avatar3d');
+                    }}
                   >
-                    {({ checked }) => (
-                      <Button primary={checked} outlined={!checked}>
-                        {t('write_and_speak.avatar3d') || 'Avatar 3D'}
-                      </Button>
-                    )}
-                  </RadioGroup.Option>
-                </RadioGroup>
+                    {t('write_and_speak.avatar3d') || 'Avatar 3D'}
+                  </Button>
+                </div>
               </div>
 
               <div className="memori-settings-drawer--field">
@@ -219,8 +208,8 @@ const SettingsDrawer = ({
                   }
                   name="enablePositionControls"
                   checked={enablePositionControls}
-                  onChange={e => {
-                    setEnablePositionControls(e.target.checked);
+                  onChange={checked => {
+                    setEnablePositionControls(checked);
                   }}
                 />
               </div>
@@ -234,9 +223,9 @@ const SettingsDrawer = ({
               }
               name="hideControls"
               checked={hideEmissions}
-              onChange={e => {
-                setHideEmissions(e.target.checked);
-                setLocalConfig('hideEmissions', e.target.checked);
+              onChange={checked => {
+                setHideEmissions(checked);
+                setLocalConfig('hideEmissions', checked);
               }}
             />
           </div>

package/src/components/SettingsDrawer/__snapshots__/SettingsDrawer.test.tsx.snap

@@ -1,59 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders SettingsDrawer for totem layout open unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;
 
 exports[`renders SettingsDrawer for totem layout open with controls at center unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;
 
 exports[`renders SettingsDrawer for totem layout with continuous speech and hide emissions unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;
 
 exports[`renders SettingsDrawer open unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;
 
 exports[`renders SettingsDrawer open with continuous speech enabled unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;
 
 exports[`renders SettingsDrawer open with non-default continuous speech timeout unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;
 
 exports[`renders SettingsDrawer unchanged 1`] = `<div />`;
 
 exports[`renders SettingsDrawer with additional custom settings unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;

package/src/components/ShareButton/ShareButton.css

@@ -3,10 +3,256 @@
     display: inline-block;
 }
 
-.memori-share-button--button {
+.memori-share-button--trigger {
+    display: flex;
+    max-width: 2rem;
+    max-height: 2rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.memori-share-button--trigger svg {
+    width: 100%;
+    max-width: 1rem;
+    height: 100%;
+    max-height: 1rem;
+}
+
+.memori-share-button .memori-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--memori-primary, #3b82f6) 40%, transparent);
+}
+
+.memori-share-button--trigger-menu-item {
+    width: 100%;
+    max-width: none;
+    max-height: none;
+    justify-content: flex-start;
+}
+
+.memori-share-button--dropdown-item-content{
+    display: inline-flex;
+    width: 100%;
+    min-height: 1.25rem;
+    align-items: center;
+    cursor: pointer;
+}
+
+.memori-share-button--dropdown-menu {
+    min-width: 15.5rem;
+    max-width: 19rem;
+    padding: 0.375rem;
+}
+
+.memori-share-button--dropdown-section {
+    display: grid;
+    gap: 0.125rem;
+}
+
+.memori-share-button--inline-list {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.memori-share-button--inline-item {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding: 0.55rem 0.65rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: transparent;
+    color: var(--memori-text-color, #111827);
+    cursor: pointer;
+    gap: 0.5rem;
+    text-align: left;
+}
+
+.memori-share-button--inline-item svg {
+    width: 1rem;
+    max-width: 1rem;
+    height: 1rem;
+    max-height: 1rem;
+    flex-shrink: 0;
+}
+
+.memori-share-button--inline-item:hover {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 10%,
+        transparent
+    );
+}
+
+.memori-share-button--inline-item:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.memori-share-button--dropdown-divider {
+    height: 1px;
+    margin: 0.375rem 0.125rem;
+    background-color: color-mix(
+        in srgb,
+        var(--memori-text-color, #111827) 12%,
+        transparent
+    );
+}
+
+/* All actionable menu rows: press feedback */
+.memori-share-button--menu-item {
+    position: relative;
+    border-radius: 0.5rem;
+    transition:
+        background-color 0.2s ease,
+        transform 0.12s ease;
+}
+
+.memori-share-button--menu-item:active:not(:disabled) {
+    transform: scale(0.985);
+}
+
+/* Same primary tint as copy success, brief feedback on share / export / social / QR */
+.memori-share-button--menu-item--flash {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 12%,
+        transparent
+    );
+}
+
+.memori-share-button--copy-item--success {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 12%,
+        transparent
+    );
+}
+
+.memori-share-button--copy-item--error {
+    background-color: color-mix(in srgb, #ef4444 10%, transparent);
+}
+
+.memori-share-button--copy-icon {
+    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.memori-share-button--copy-item--success .memori-share-button--copy-icon {
+    animation: memori-share-copy-check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)
+        both;
+    color: var(--memori-primary, #3b82f6);
+}
+
+.memori-share-button--copy-label {
+    transition: opacity 0.15s ease;
+}
+
+.memori-share-button--copy-item--success .memori-share-button--copy-label {
+    font-weight: 600;
+}
+
+.memori-share-button--copy-item--error .memori-share-button--copy-label {
+    color: #b91c1c;
+}
+
+@keyframes memori-share-copy-check-pop {
+    0% {
+        opacity: 0.85;
+        transform: scale(0.6) rotate(-12deg);
+    }
+
+    60% {
+        transform: scale(1.08) rotate(4deg);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+    }
+}
+
+.memori-share-button--qr-download {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 0.5rem;
+    margin-top: 0.25rem;
+    background: transparent;
+    color: var(--memori-primary, #3b82f6);
     cursor: pointer;
+    font: inherit;
+    font-weight: 600;
+    gap: 0.5rem;
+    transition:
+        background-color 0.2s ease,
+        transform 0.12s ease;
 }
 
+.memori-share-button--qr-download svg {
+    width: 1rem;
+    max-width: 1rem;
+    height: 1rem;
+    max-height: 1rem;
+    flex-shrink: 0;
+}
+
+.memori-share-button--qr-download:hover {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 10%,
+        transparent
+    );
+}
+
+.memori-share-button--qr-download:focus-visible {
+    outline: 2px solid color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 55%,
+        transparent
+    );
+    outline-offset: 2px;
+}
+
+.memori-share-button--qr-item {
+    display: flex;
+    justify-content: center;
+    padding: 0.625rem;
+}
+
+.memori-share-button--qr-content {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.memori-share-button--qr-download:active {
+    transform: scale(0.985);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .memori-share-button--menu-item,
+    .memori-share-button--copy-item,
+    .memori-share-button--copy-icon,
+    .memori-share-button--copy-label,
+    .memori-share-button--qr-download {
+        animation: none;
+        transition: none;
+    }
+
+    .memori-share-button--menu-item:active:not(:disabled),
+    .memori-share-button--qr-download:active {
+        transform: none;
+    }
+}
+
+
 .memori-share-button--overlay {
     position: absolute;
     right: auto;
@@ -16,12 +262,12 @@
     flex-direction: column;
     padding: 0.5rem 0;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0.375rem;
+    border-radius: var(--memori-radius-box);
     margin: 0;
-    margin-top: 0.5rem;
+    margin-top: var(--memori-spacing-sm);
     background-color: #fff;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
-    color: #000;
+    color: var(--memori-text-color);
     list-style: none;
     outline: none;
     transform-origin: top right;
@@ -50,24 +296,24 @@ a.memori-share-button--link {
 }
 
 .memori-share-button--li-qr-code {
-    margin-top: 0.5rem;
+    margin-top: var(--memori-spacing-sm);
     text-align: center;
 }
 
 .memori-share-button--li-qr-code button {
     background: #fff;
-    color: #333;
+    color: var(--memori-text-color);
     cursor: pointer;
 }
 
 .memori-share-button--li-qr-code button:hover,
 .memori-share-button--li-qr-code button:focus {
     background: #fff;
-    color: #000;
+    color: var(--memori-text-color);
 }
 
 .memori-share-button--li-shared {
     padding-bottom: 0.25rem;
     border-bottom: 1px solid var(--memori-primary);
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--memori-spacing-sm);
 }

package/src/components/ShareButton/ShareButton.stories.tsx

@@ -5,6 +5,7 @@ import ShareButton, { Props } from './ShareButton';
 import { tenant, memori, sessionID } from '../../mocks/data';
 
 import './ShareButton.css';
+import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
   title: 'Share Button',
@@ -30,14 +31,18 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
-    <ShareButton {...args} />
+    <AlertProvider defaultDuration={5000}>
+      <ShareButton {...args} />
+    </AlertProvider>
   </I18nWrapper>
 );
 const TemplateRight: Story<Props> = args => (
   <I18nWrapper>
-    <div style={{ textAlign: 'right' }}>
-      <ShareButton {...args} />
-    </div>
+    <AlertProvider defaultDuration={5000}>
+      <div style={{ textAlign: 'right' }}>
+        <ShareButton {...args} />
+      </div>
+    </AlertProvider>
   </I18nWrapper>
 );
 

package/src/components/ShareButton/ShareButton.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from '../../testUtils';
 import ShareButton from './ShareButton';
 import { tenant, memori, sessionID } from '../../mocks/data';