@nylas/react 2.0.0 → 2.0.1

package/dist/lib/notetaker/SendNotetaker/SendNotetaker.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { RecordingType, Notetaker } from "../types";
+export interface SendNotetakerStore {
+    name: string;
+    setName: (name: string) => void;
+    meetingLink: string;
+    setMeetingLink: (meetingLink: string) => void;
+    date: string;
+    setDate: (date: string) => void;
+    time: string;
+    setTime: (time: string) => void;
+    advancedSettings: boolean;
+    setAdvancedSettings: (show: boolean) => void;
+    selectedRecordingTypes: RecordingType[];
+    setSelectedRecordingTypes: (types: RecordingType[]) => void;
+    toggleRecordingType: (type: RecordingType) => void;
+    isLoading: boolean;
+    setIsLoading: (isLoading: boolean) => void;
+    reset: () => void;
+    handleSubmit: (onSend?: (data: Notetaker, resetForm: () => void) => void, onError?: (error: any) => void) => void;
+}
+export declare const sendNotetakerStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SendNotetakerStore>>;
+export interface SendNotetakerProps {
+    notetakerName?: string;
+    showNameInput?: boolean;
+    showAdvancedSettings?: boolean;
+    className?: string;
+    onSend?: (data: Notetaker, resetForm: () => void) => void;
+    onError?: (error: any) => void;
+}
+export declare function SendNotetaker({ className, onSend, onError, notetakerName, }: SendNotetakerProps): React.JSX.Element;

package/dist/lib/notetaker/SendNotetaker/SendNotetaker.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/notetaker/Transcript/Transcript.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface TranscriptProps {
+    transcript: TranscriptItem[];
+    autoscroll?: boolean;
+    toolbar?: boolean;
+    emptyState?: React.ReactNode;
+    showSpeaker?: boolean;
+    showTimestamps?: boolean;
+    resumeAutoscrollLabel?: string;
+    onTimestampClick?: (timestamp: number) => void;
+    transcriptComponent?: React.ComponentType<{
+        text: string;
+        highlight: string | null;
+    }>;
+}
+export interface TranscriptItem {
+    speaker: string;
+    start: number;
+    end: number;
+    text: string;
+}
+declare const Transcript: React.FC<TranscriptProps>;
+export { Transcript };

package/dist/lib/notetaker/VideoPlayer/VideoPlayer.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface VideoStore {
+    currentTime: number;
+    setCurrentTime: (time: number) => void;
+}
+export declare const videoPlayerStore: import("zustand").UseBoundStore<import("zustand").StoreApi<VideoStore>>;
+export interface VideoPlayerProps {
+    videoUrl: string;
+    className?: string;
+    poster?: string;
+    autoPlay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    videoType?: string;
+    onTimeUpdate?: (currentTime: number) => void;
+    onSeek?: (newTime: number) => void;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+}
+export declare const VideoPlayer: React.FC<VideoPlayerProps>;
+export {};

package/dist/lib/notetaker/VideoPlayer/VideoPlayer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/notetaker/index.d.ts

@@ -0,0 +1,9 @@
+export { Transcript } from "./Transcript/Transcript";
+export { VideoPlayer } from "./VideoPlayer/VideoPlayer";
+export { CalendarSync } from "./CalendarSync/CalendarSync";
+export { SendNotetaker } from "./SendNotetaker/SendNotetaker";
+export { provider } from "./lib/store";
+export { calendarSyncStore } from "./CalendarSync/CalendarSync";
+export { sendNotetakerStore } from "./SendNotetaker/SendNotetaker";
+export { videoPlayerStore } from "./VideoPlayer/VideoPlayer";
+export type { Transcript as TranscriptType, TranscriptItem, } from "./Transcript/Transcript";

package/dist/lib/notetaker/lib/constants.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { MeetingFilter, RecordingType } from "../types";
+export declare const DEFAULT_RECORDING_TYPES: RecordingType[];
+export declare const RECORDING_TYPES: {
+    value: RecordingType;
+    label: string;
+    icon: React.ElementType;
+}[];
+export declare const MEETING_TYPES: {
+    value: MeetingFilter;
+    label: string;
+}[];

package/dist/lib/notetaker/lib/http-client.d.ts

@@ -0,0 +1,2 @@
+declare const client: import("axios").AxiosInstance;
+export default client;

package/dist/lib/notetaker/lib/primitives.d.ts

@@ -0,0 +1,66 @@
+export declare const label: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const button: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: ("ny:text-sm" | "ny:h-8")[];
+    };
+    variant: {
+        primary: ("ny:outline-none" | "ny:bg-primary-500" | "ny:text-white" | "ny:border-primary-500" | "ny:hover:bg-primary-600" | "ny:hover:text-white" | "ny:shadow-md" | "ny:shadow-primary-100")[];
+        link: ("ny:cursor-pointer" | "ny:bg-transparent" | "ny:text-primary-500" | "ny:hover:text-primary-600" | "ny:border-none" | "ny:font-medium")[];
+    };
+    color: {
+        danger: ("ny:text-red-500" | "ny:hover:text-red-600")[];
+    };
+    active: {
+        true: ("ny:border-primary-500" | "ny:shadow-md" | "ny:shadow-primary-100" | "ny:text-primary-500" | "ny:bg-primary-50" | "ny:hover:bg-primary-100")[];
+    };
+    disabled: {
+        true: ("ny:hover:bg-gray-100" | "ny:border-gray-100" | "ny:text-gray-400" | "ny:bg-gray-100" | "ny:shadow-none" | "ny:cursor-not-allowed")[];
+    };
+}, undefined, ("ny:text-sm" | "ny:border" | "ny:rounded-lg" | "ny:px-4" | "ny:border-gray-200" | "ny:text-gray-700" | "ny:hover:bg-gray-50" | "ny:transition-all" | "ny:duration-200" | "ny:transition-colors" | "ny:h-10" | "ny:flex" | "ny:items-center" | "ny:space-x-1" | "ny:hover:text-gray-900" | "ny:hover:bg-gray-100" | "ny:outline-none" | "ny:cursor-pointer")[], {
+    size: {
+        small: ("ny:text-sm" | "ny:h-8")[];
+    };
+    variant: {
+        primary: ("ny:outline-none" | "ny:bg-primary-500" | "ny:text-white" | "ny:border-primary-500" | "ny:hover:bg-primary-600" | "ny:hover:text-white" | "ny:shadow-md" | "ny:shadow-primary-100")[];
+        link: ("ny:cursor-pointer" | "ny:bg-transparent" | "ny:text-primary-500" | "ny:hover:text-primary-600" | "ny:border-none" | "ny:font-medium")[];
+    };
+    color: {
+        danger: ("ny:text-red-500" | "ny:hover:text-red-600")[];
+    };
+    active: {
+        true: ("ny:border-primary-500" | "ny:shadow-md" | "ny:shadow-primary-100" | "ny:text-primary-500" | "ny:bg-primary-50" | "ny:hover:bg-primary-100")[];
+    };
+    disabled: {
+        true: ("ny:hover:bg-gray-100" | "ny:border-gray-100" | "ny:text-gray-400" | "ny:bg-gray-100" | "ny:shadow-none" | "ny:cursor-not-allowed")[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        small: ("ny:text-sm" | "ny:h-8")[];
+    };
+    variant: {
+        primary: ("ny:outline-none" | "ny:bg-primary-500" | "ny:text-white" | "ny:border-primary-500" | "ny:hover:bg-primary-600" | "ny:hover:text-white" | "ny:shadow-md" | "ny:shadow-primary-100")[];
+        link: ("ny:cursor-pointer" | "ny:bg-transparent" | "ny:text-primary-500" | "ny:hover:text-primary-600" | "ny:border-none" | "ny:font-medium")[];
+    };
+    color: {
+        danger: ("ny:text-red-500" | "ny:hover:text-red-600")[];
+    };
+    active: {
+        true: ("ny:border-primary-500" | "ny:shadow-md" | "ny:shadow-primary-100" | "ny:text-primary-500" | "ny:bg-primary-50" | "ny:hover:bg-primary-100")[];
+    };
+    disabled: {
+        true: ("ny:hover:bg-gray-100" | "ny:border-gray-100" | "ny:text-gray-400" | "ny:bg-gray-100" | "ny:shadow-none" | "ny:cursor-not-allowed")[];
+    };
+}, undefined, ("ny:text-sm" | "ny:border" | "ny:rounded-lg" | "ny:px-4" | "ny:border-gray-200" | "ny:text-gray-700" | "ny:hover:bg-gray-50" | "ny:transition-all" | "ny:duration-200" | "ny:transition-colors" | "ny:h-10" | "ny:flex" | "ny:items-center" | "ny:space-x-1" | "ny:hover:text-gray-900" | "ny:hover:bg-gray-100" | "ny:outline-none" | "ny:cursor-pointer")[], unknown, unknown, undefined>>;
+export declare const input: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: ("ny:border-gray-200" | "ny:text-gray-400" | "ny:bg-gray-100" | "ny:cursor-not-allowed")[];
+    };
+}, undefined, ("ny:text-sm" | "ny:block" | "ny:border" | "ny:rounded-lg" | "ny:px-4" | "ny:border-gray-200" | "ny:h-8" | "ny:focus:outline-primary-500" | "ny:w-full" | "ny:text-gray-900" | "ny:py-1")[], {
+    disabled: {
+        true: ("ny:border-gray-200" | "ny:text-gray-400" | "ny:bg-gray-100" | "ny:cursor-not-allowed")[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: ("ny:border-gray-200" | "ny:text-gray-400" | "ny:bg-gray-100" | "ny:cursor-not-allowed")[];
+    };
+}, undefined, ("ny:text-sm" | "ny:block" | "ny:border" | "ny:rounded-lg" | "ny:px-4" | "ny:border-gray-200" | "ny:h-8" | "ny:focus:outline-primary-500" | "ny:w-full" | "ny:text-gray-900" | "ny:py-1")[], unknown, unknown, undefined>>;

package/dist/lib/notetaker/lib/store.d.ts

@@ -0,0 +1,7 @@
+export interface ProviderStore {
+    apiUrl: string;
+    setApiUrl: (url: string) => void;
+    accessToken: string;
+    setAccessToken: (token: string) => void;
+}
+export declare const provider: import("zustand").UseBoundStore<import("zustand").StoreApi<ProviderStore>>;

package/dist/lib/notetaker/types.d.ts

@@ -0,0 +1,42 @@
+export declare enum RecordingType {
+    Video = "video",
+    Audio = "audio",
+    Transcript = "transcript"
+}
+export declare enum MeetingFilter {
+    All = "all",
+    Internal = "internal",
+    External = "external",
+    MyMeetings = "my_meetings",
+    Participant = "participant"
+}
+export interface Notetaker {
+    id: string;
+    name: string;
+    meeting_link: string;
+    join_time: number;
+    meeting_settings: {
+        video_recording: boolean;
+        audio_recording: boolean;
+        transcription: boolean;
+    };
+}
+interface CalendarNotetaker extends Partial<Notetaker> {
+    rules?: {
+        event_selection?: MeetingFilter[];
+    };
+}
+export interface Calendar {
+    name: string;
+    timezone: string;
+    hex_color?: string;
+    hex_foreground_color?: string;
+    grant_id: string;
+    id: string;
+    object: "calendar";
+    is_primary: boolean;
+    read_only: boolean;
+    is_owned_by_user: boolean;
+    notetaker: CalendarNotetaker;
+}
+export {};

package/dist/multi-select-dropdown.entry-0a6f9417.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./index-f769bc2a.cjs");require("react");require("react/jsx-runtime");require("react-dom");const d=':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropdown .dropdown-label p{margin:0}.dropdown .dropdown-label span.required{color:var(--nylas-error);padding:0 0.25rem}.dropdown span.error{color:var(--nylas-error);font-size:14px}.dropbtn{width:inherit;height:48px;color:var(--nylas-base-900);padding:0.5rem;font-size:16px;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:72px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.dropdown-content ul li.disabled{cursor:not-allowed;opacity:0.5}.dropdown-content ul li.disabled label{cursor:not-allowed}.dropdown-content ul li.disabled label input{cursor:not-allowed}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem;background:var(--nylas-base-0)}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}.selected-options .selected-option button:disabled{cursor:not-allowed;background:var(--nylas-base-100)}',c=d,i=class{constructor(e){l.registerInstance(this,e),this.selectedOptionsChanged=l.createEvent(this,"selectedOptionsChanged",7),this.name=void 0,this.label=void 0,this.options=[],this.error="",this.required=!1,this.readOnly=!1,this.multipleOptionsSelectedLabel="Multiple options selected",this.selectAtLeastOneOptionLabel="Please select at least one option",this.availableOptions=this.options,this.isOpen=!1,this.ariaActivedescendant="",this.shouldFocusFirstOption=!1}areOptionsEqual(e,s){if(e.length!==s.length)return!1;const a=[...e].sort((n,o)=>n.label.localeCompare(o.label)||n.value.localeCompare(o.value)),t=[...s].sort((n,o)=>n.label.localeCompare(o.label)||n.value.localeCompare(o.value));return a.every((n,o)=>{const r=t[o];return n.label===r.label&&n.value===r.value})}optionsChangedHandler(e){this.areOptionsEqual(e,this.availableOptions)||(this.availableOptions=e)}componentDidLoad(){l.debug("multi-select-dropdown","componentDidLoad"),this.options&&(this.availableOptions=this.options)}componentDidRender(){var e;l.debug("multi-select-dropdown","componentDidRender"),this.isOpen&&this.shouldFocusFirstOption&&(this.ariaActivedescendant=(e=this.availableOptions[0])==null?void 0:e.value,this.focusOption(0),this.shouldFocusFirstOption=!1)}handleOutsideClick(e){!e.composedPath().includes(this.el)&&this.isOpen&&(this.isOpen=!1)}handleBookingFormSubmitted(e){const s=this.availableOptions.filter(a=>a.selected).map(a=>a.value);this.required&&(!s||s.length<=0)&&(this.error="Please select at least one option"),this.error&&e.preventDefault()}selectOption(e){this.availableOptions=this.availableOptions.map(a=>(a.value===e.value&&(a.selected=!e.selected,a.selected&&(this.error="")),a));const s=this.availableOptions.filter(a=>a.selected).map(a=>a.value);this.selectedOptionsChanged.emit({value:s,name:this.name})}toggleDropdown(){this.isOpen=!this.isOpen,this.isOpen?this.shouldFocusFirstOption=!0:this.ariaActivedescendant=""}handleSelectButtonKeyDown(e){switch(e.key){case"ArrowDown":case"Enter":e.preventDefault(),this.isOpen||this.toggleDropdown();break;case"Escape":this.isOpen=!1;break}}handleListboxKeydown(e){const s=this.availableOptions,a=s.findIndex(t=>t.value===this.ariaActivedescendant);switch(e.key){case"ArrowDown":case"Tab":{if(e.shiftKey){e.preventDefault();const t=a-1>=0?a-1:s.length-1;this.ariaActivedescendant=s[t].value,this.focusOption(t)}else{e.preventDefault();const t=a+1<s.length?a+1:0;this.ariaActivedescendant=s[t].value,this.focusOption(t)}break}case"ArrowUp":{e.preventDefault();const t=a-1>=0?a-1:s.length-1;this.ariaActivedescendant=s[t].value,this.focusOption(t);break}case"Enter":{e.preventDefault(),this.ariaActivedescendant&&this.selectOption(s[a]);break}case"Escape":{this.isOpen=!1;break}}}focusOption(e){var n;const s=this.availableOptions[e];if(!s)return;const a=s.value,t=(n=this.el.shadowRoot)==null?void 0:n.getElementById(a);t&&(t.focus(),t.scrollIntoView({behavior:"smooth",block:"nearest"}))}getSelectedOptions(){return this.availableOptions.filter(e=>e.selected)}renderOption(e){return l.h("li",{key:e.value,id:e.value,role:"option",tabindex:"0","aria-selected":e.selected?"true":"false",onClick:s=>{s.stopImmediatePropagation(),e!=null&&e.disabled||this.selectOption(e)},class:{selected:!!e.selected,disabled:!!e.disabled}},l.h("label",{htmlFor:e.value},l.h("input",{"aria-hidden":"true",id:e.value,type:"checkbox",checked:e.selected,disabled:!!(e!=null&&e.disabled)}),l.h("span",null,e.label)))}render(){var e,s;return l.h(l.Host,{key:"d0b2dba51e53ebd85e26eb55798f868e78353c9b"},l.h("div",{key:"734ddac426729d6428ba7876b4fce2af038c8693",class:"dropdown",part:"msd_dropdown"},l.h("label",{key:"f59ac5c52d91b4f3c1250e2294517e543e04e2e3",class:"dropdown-label",part:"msd_dropdown-label"},l.h("p",{key:"35d11a9d8a07e6e6dc47a3be18687a2296ec3364"},l.h("span",{key:"6a5f3510cff852df33adea9dadf138f7bea6c5c8",class:"label"},this.label),this.required&&l.h("span",{class:"required"},"*")),l.h("slot",{key:"7e2547b4767fe67f752cae7ffd0ba5e776455c8c",name:"label-icon","aria-hidden":"true"})),l.h("button",{key:"24579f516264491ac90cf72d32f256107000c0b7",name:this.name,part:`msd_dropdown-button ${this.error?"msd_dropdown-button--error":""}`,class:{dropbtn:!0,open:this.isOpen,error:!!this.error},onClick:()=>this.toggleDropdown(),disabled:this.readOnly,title:this.readOnly?"read-only field":void 0,"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-label":this.name,onKeyDown:a=>this.handleSelectButtonKeyDown(a)},l.h("slot",{key:"e50db39a7e6d2e31605ce2377f99c36da5e847b5",name:"select-icon","aria-hidden":"true"}),l.h("span",{key:"a7f18b098f7bc573e91ef9e5b2348ff8de95c13a",class:"selected-option",part:"msd_dropdown-button-selected-label"},this.getSelectedOptions().length>1?this.multipleOptionsSelectedLabel:((e=this.availableOptions.filter(a=>a.selected)[0])==null?void 0:e.label)??this.selectAtLeastOneOptionLabel??((s=this.availableOptions[0])==null?void 0:s.label)),l.h("span",{key:"f2b00f9e55299d48161910627a7d6f5a646f5a44",class:this.isOpen?"open":"closed","aria-hidden":"true"},l.h("chevron-icon",{key:"6d1a184975ac00bbbe79632eda290590a2f2744d",width:"16",height:"16"}))),this.error?l.h("span",{class:"error",part:"msd_dropdown_error"},this.error):null,l.h("div",{key:"34cfb8ded6c549a7d8b0ce38c0093cc94a7aa2a3",class:"selected-options"},this.getSelectedOptions().map(a=>l.h("span",{class:"selected-option"},a.label,l.h("button",{disabled:this.readOnly||!!(a!=null&&a.disabled),key:a.label,onClick:()=>this.selectOption(a)},l.h("close-icon",null))))),this.isOpen?l.h("div",{class:"dropdown-content",part:"msd_dropdown-content"},l.h("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-multiselectable":!0,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:a=>this.handleListboxKeydown(a)},this.availableOptions.map(a=>this.renderOption(a)))):null))}get el(){return l.getElement(this)}static get watchers(){return{options:["optionsChangedHandler"]}}};i.style=c;exports.multi_select_dropdown=i;

package/dist/multi-select-dropdown.entry-1b27c746.js

@@ -0,0 +1,121 @@
+import { r as d, a as c, b as i, h as s, H as p, g as b } from "./index-71f61ea9.js";
+import "react";
+import "react/jsx-runtime";
+import "react-dom";
+const f = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropdown .dropdown-label p{margin:0}.dropdown .dropdown-label span.required{color:var(--nylas-error);padding:0 0.25rem}.dropdown span.error{color:var(--nylas-error);font-size:14px}.dropbtn{width:inherit;height:48px;color:var(--nylas-base-900);padding:0.5rem;font-size:16px;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:72px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.dropdown-content ul li.disabled{cursor:not-allowed;opacity:0.5}.dropdown-content ul li.disabled label{cursor:not-allowed}.dropdown-content ul li.disabled label input{cursor:not-allowed}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem;background:var(--nylas-base-0)}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}.selected-options .selected-option button:disabled{cursor:not-allowed;background:var(--nylas-base-100)}', y = f, h = class {
+  constructor(e) {
+    d(this, e), this.selectedOptionsChanged = c(this, "selectedOptionsChanged", 7), this.name = void 0, this.label = void 0, this.options = [], this.error = "", this.required = !1, this.readOnly = !1, this.multipleOptionsSelectedLabel = "Multiple options selected", this.selectAtLeastOneOptionLabel = "Please select at least one option", this.availableOptions = this.options, this.isOpen = !1, this.ariaActivedescendant = "", this.shouldFocusFirstOption = !1;
+  }
+  areOptionsEqual(e, l) {
+    if (e.length !== l.length)
+      return !1;
+    const a = [...e].sort((o, n) => o.label.localeCompare(n.label) || o.value.localeCompare(n.value)), t = [...l].sort((o, n) => o.label.localeCompare(n.label) || o.value.localeCompare(n.value));
+    return a.every((o, n) => {
+      const r = t[n];
+      return o.label === r.label && o.value === r.value;
+    });
+  }
+  optionsChangedHandler(e) {
+    this.areOptionsEqual(e, this.availableOptions) || (this.availableOptions = e);
+  }
+  componentDidLoad() {
+    i("multi-select-dropdown", "componentDidLoad"), this.options && (this.availableOptions = this.options);
+  }
+  componentDidRender() {
+    var e;
+    i("multi-select-dropdown", "componentDidRender"), this.isOpen && this.shouldFocusFirstOption && (this.ariaActivedescendant = (e = this.availableOptions[0]) == null ? void 0 : e.value, this.focusOption(0), this.shouldFocusFirstOption = !1);
+  }
+  handleOutsideClick(e) {
+    !e.composedPath().includes(this.el) && this.isOpen && (this.isOpen = !1);
+  }
+  handleBookingFormSubmitted(e) {
+    const l = this.availableOptions.filter((a) => a.selected).map((a) => a.value);
+    this.required && (!l || l.length <= 0) && (this.error = "Please select at least one option"), this.error && e.preventDefault();
+  }
+  selectOption(e) {
+    this.availableOptions = this.availableOptions.map((a) => (a.value === e.value && (a.selected = !e.selected, a.selected && (this.error = "")), a));
+    const l = this.availableOptions.filter((a) => a.selected).map((a) => a.value);
+    this.selectedOptionsChanged.emit({
+      value: l,
+      name: this.name
+    });
+  }
+  toggleDropdown() {
+    this.isOpen = !this.isOpen, this.isOpen ? this.shouldFocusFirstOption = !0 : this.ariaActivedescendant = "";
+  }
+  handleSelectButtonKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+      case "Enter":
+        e.preventDefault(), this.isOpen || this.toggleDropdown();
+        break;
+      case "Escape":
+        this.isOpen = !1;
+        break;
+    }
+  }
+  handleListboxKeydown(e) {
+    const l = this.availableOptions, a = l.findIndex((t) => t.value === this.ariaActivedescendant);
+    switch (e.key) {
+      case "ArrowDown":
+      case "Tab": {
+        if (e.shiftKey) {
+          e.preventDefault();
+          const t = a - 1 >= 0 ? a - 1 : l.length - 1;
+          this.ariaActivedescendant = l[t].value, this.focusOption(t);
+        } else {
+          e.preventDefault();
+          const t = a + 1 < l.length ? a + 1 : 0;
+          this.ariaActivedescendant = l[t].value, this.focusOption(t);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const t = a - 1 >= 0 ? a - 1 : l.length - 1;
+        this.ariaActivedescendant = l[t].value, this.focusOption(t);
+        break;
+      }
+      case "Enter": {
+        e.preventDefault(), this.ariaActivedescendant && this.selectOption(l[a]);
+        break;
+      }
+      case "Escape": {
+        this.isOpen = !1;
+        break;
+      }
+    }
+  }
+  focusOption(e) {
+    var o;
+    const l = this.availableOptions[e];
+    if (!l)
+      return;
+    const a = l.value, t = (o = this.el.shadowRoot) == null ? void 0 : o.getElementById(a);
+    t && (t.focus(), t.scrollIntoView({ behavior: "smooth", block: "nearest" }));
+  }
+  getSelectedOptions() {
+    return this.availableOptions.filter((e) => e.selected);
+  }
+  renderOption(e) {
+    return s("li", { key: e.value, id: e.value, role: "option", tabindex: "0", "aria-selected": e.selected ? "true" : "false", onClick: (l) => {
+      l.stopImmediatePropagation(), e != null && e.disabled || this.selectOption(e);
+    }, class: { selected: !!e.selected, disabled: !!e.disabled } }, s("label", { htmlFor: e.value }, s("input", { "aria-hidden": "true", id: e.value, type: "checkbox", checked: e.selected, disabled: !!(e != null && e.disabled) }), s("span", null, e.label)));
+  }
+  render() {
+    var e, l;
+    return s(p, { key: "d0b2dba51e53ebd85e26eb55798f868e78353c9b" }, s("div", { key: "734ddac426729d6428ba7876b4fce2af038c8693", class: "dropdown", part: "msd_dropdown" }, s("label", { key: "f59ac5c52d91b4f3c1250e2294517e543e04e2e3", class: "dropdown-label", part: "msd_dropdown-label" }, s("p", { key: "35d11a9d8a07e6e6dc47a3be18687a2296ec3364" }, s("span", { key: "6a5f3510cff852df33adea9dadf138f7bea6c5c8", class: "label" }, this.label), this.required && s("span", { class: "required" }, "*")), s("slot", { key: "7e2547b4767fe67f752cae7ffd0ba5e776455c8c", name: "label-icon", "aria-hidden": "true" })), s("button", { key: "24579f516264491ac90cf72d32f256107000c0b7", name: this.name, part: `msd_dropdown-button ${this.error ? "msd_dropdown-button--error" : ""}`, class: { dropbtn: !0, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, title: this.readOnly ? "read-only field" : void 0, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.name, onKeyDown: (a) => this.handleSelectButtonKeyDown(a) }, s("slot", { key: "e50db39a7e6d2e31605ce2377f99c36da5e847b5", name: "select-icon", "aria-hidden": "true" }), s("span", { key: "a7f18b098f7bc573e91ef9e5b2348ff8de95c13a", class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? this.multipleOptionsSelectedLabel : ((e = this.availableOptions.filter((a) => a.selected)[0]) == null ? void 0 : e.label) ?? this.selectAtLeastOneOptionLabel ?? ((l = this.availableOptions[0]) == null ? void 0 : l.label)), s("span", { key: "f2b00f9e55299d48161910627a7d6f5a646f5a44", class: this.isOpen ? "open" : "closed", "aria-hidden": "true" }, s("chevron-icon", { key: "6d1a184975ac00bbbe79632eda290590a2f2744d", width: "16", height: "16" }))), this.error ? s("span", { class: "error", part: "msd_dropdown_error" }, this.error) : null, s("div", { key: "34cfb8ded6c549a7d8b0ce38c0093cc94a7aa2a3", class: "selected-options" }, this.getSelectedOptions().map((a) => s("span", { class: "selected-option" }, a.label, s("button", { disabled: this.readOnly || !!(a != null && a.disabled), key: a.label, onClick: () => this.selectOption(a) }, s("close-icon", null))))), this.isOpen ? s("div", { class: "dropdown-content", part: "msd_dropdown-content" }, s("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": !0, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (a) => this.handleListboxKeydown(a) }, this.availableOptions.map((a) => this.renderOption(a)))) : null));
+  }
+  get el() {
+    return b(this);
+  }
+  static get watchers() {
+    return {
+      options: ["optionsChangedHandler"]
+    };
+  }
+};
+h.style = y;
+export {
+  h as multi_select_dropdown
+};