@invopop/popui 0.0.66 → 0.0.68

package/dist/BaseButton.svelte

@@ -104,7 +104,7 @@ function handleClick(event) {
       {/if}
       {#if notification}
         <span
-          class="absolute top-0 right-0 -mt-0.5 -mr-0.5 w-1.5 h-1.5 bg-danger-500 rounded-full z-20"
+          class="absolute top-0 right-0 w-1.5 h-1.5 bg-danger-500 rounded-full z-20"
         />
       {/if}
     </div>

package/dist/DatePicker.svelte

@@ -17,6 +17,7 @@ import {
 import { Icon } from "@steeze-ui/svelte-icon";
 import { Calendar } from "@invopop/ui-icons";
 import clsx from "clsx";
+import { clickOutside } from "./clickOutside.js";
 const dispatch = createEventDispatcher();
 export let label = "Date";
 export let position = "left";
@@ -29,7 +30,7 @@ $:
 $:
   styles = clsx({
     "border-workspace-accent focus:border-workspace-accent shadow-active": isOpen,
-    "border-neutral-200": !isOpen
+    "border-neutral-200 hover:border-neutral-300": !isOpen
   });
 let datePickerEl;
 let selectedLabel = label;
@@ -184,8 +185,10 @@ function getDisplayFromValue(value) {
 <div>
   <div class="relative">
     <button
-      on:click={() => (isOpen = !isOpen)}
-      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border hover:border-neutral-300 rounded-md text-neutral-800 placeholder-neutral-800 text-base"
+      on:click={() => {
+        isOpen = !isOpen
+      }}
+      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border rounded-md text-neutral-800 placeholder-neutral-800 text-base"
     >
       {selectedLabel}
     </button>
@@ -202,10 +205,13 @@ function getDisplayFromValue(value) {
       leaveFrom="transform opacity-100 scale-100"
       leaveTo="transform opacity-0 scale-95"
     >
+      <!-- @ts-ignore -->
       <div
         class:left-0={position === 'left'}
         class:right-0={position === 'right'}
         class="bg-white inline-flex flex-col shadow rounded-lg absolute right-0 top-2 z-40"
+        use:clickOutside
+        on:click_outside={cancel}
       >
         <div class="flex border-b border-neutral-100 h-[300px]">
           <div class="flex flex-col space-y-2 items-start p-3 border-r border-neutral-100">

package/dist/index.d.ts

@@ -33,6 +33,7 @@ import InputText from './InputText.svelte';
 import InputTextarea from './InputTextarea.svelte';
 import InputToggle from './InputToggle.svelte';
 import MenuItem from './MenuItem.svelte';
+import MenuItemCollapsible from './MenuItemCollapsible.svelte';
 import ProfileAvatar from './ProfileAvatar.svelte';
 import ProfileSelector from './ProfileSelector.svelte';
 import SectionLayout from './SectionLayout.svelte';
@@ -50,4 +51,4 @@ import twTheme from './tw.theme.js';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
-export { BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, Breadcrumbs, ButtonFile, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, Tabs, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
+export { BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, Breadcrumbs, ButtonFile, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, Tabs, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };

package/dist/index.js

@@ -33,6 +33,7 @@ import InputText from './InputText.svelte'
 import InputTextarea from './InputTextarea.svelte'
 import InputToggle from './InputToggle.svelte'
 import MenuItem from './MenuItem.svelte'
+import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 import ProfileAvatar from './ProfileAvatar.svelte'
 import ProfileSelector from './ProfileSelector.svelte'
 import SectionLayout from './SectionLayout.svelte'
@@ -85,6 +86,7 @@ export {
   InputTextarea,
   InputToggle,
   MenuItem,
+  MenuItemCollapsible,
   ProfileAvatar,
   ProfileSelector,
   SectionLayout,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",