@onereach/ui-components 5.0.2 → 5.0.3-beta.3155.0

package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -10,6 +10,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -19,8 +20,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
@@ -37,8 +40,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
+    clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
         type: PropType<SelectOption[]>;
@@ -68,6 +74,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         default: undefined;
     };
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
     hint: {
         type: StringConstructor;
         default: undefined;
@@ -133,6 +143,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         default: undefined;
     };
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
     hint: {
         type: StringConstructor;
         default: undefined;
@@ -177,6 +191,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     multiple: boolean;
     size: SelectSize;
     placeholder: string;
+    searchPlaceholder: string;
     hint: string;
     error: string | boolean;
     required: boolean;
@@ -197,6 +212,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -206,8 +222,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
@@ -224,8 +242,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
+    clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number | object | string[] | object[] | number[];
     label: string;
@@ -234,6 +255,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     multiple: boolean;
     size: SelectSize;
     placeholder: string;
+    searchPlaceholder: string;
     hint: string;
     error: string | boolean;
     required: boolean;
@@ -253,6 +275,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     multiple: boolean;
     size: SelectSize;
     placeholder: string;
+    searchPlaceholder: string;
     hint: string;
     error: string | boolean;
     required: boolean;

package/dist/bundled/v2/components/OrSelectV3/styles.d.ts

@@ -1,7 +1,9 @@
-export declare const SelectRoot: string[];
+export declare const Select: string[];
 export declare const SelectControl: string[];
+export declare const SelectSearchControl: string[];
 export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];
 export declare const SelectDropdownFlipped: string[];
+export declare const SelectDropdownItem: string[];
 export declare const SelectNoSearchResults: string[];

package/dist/bundled/v2/components/OrSelectV3/styles.js

@@ -1,4 +1,4 @@
-const SelectRoot = [
+const Select = [
 // Layout
 'layout-column',
 // Spacing
@@ -6,14 +6,19 @@ const SelectRoot = [
 const SelectControl = [
 // Layout
 'layout-row',
-// Box
-'w-full',
+// Layout (empty)
+'empty:hidden',
 // Overflow
 'overflow-hidden',
 // Spacing
 'gap-xs',
 // Typography
 'typography-inherit'];
+const SelectSearchControl = [
+// Layout
+'grow',
+// Spacing
+'!mx-lg md:!-mx-sm+', '!my-sm md:!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -38,6 +43,11 @@ const SelectDropdownFlipped = [
 'rounded-t-md',
 // Theme
 '!border-b-0'];
+const SelectDropdownItem = [
+// Typography
+'!typography-body-2-regular',
+// Typography (selected)
+'selected:!typography-body-2-semibold'];
 const SelectNoSearchResults = [
 // Layout
 'layout-row justify-center',
@@ -48,4 +58,4 @@ const SelectNoSearchResults = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot };
+export { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl };

package/dist/bundled/v2/components/OrTimePickerV3/OrTimePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-e57095bf.js';
 import { TimePicker, TimePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrTimePickerV3/index.js

@@ -3,7 +3,7 @@ export { DateTimePickerTimeFormat as TimePickerFormat } from '../OrDateTimePicke
 export { InputBoxSize as TimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/index.js

@@ -237,7 +237,7 @@ import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
 import '../OrDateTimePickerMonthSelect-f013aba1.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../OrDateTimePickerPopoverHeader-a4f77733.js';
+import '../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import './OrDatePickerV3/styles.js';
 import '../directives/dropdown-close.js';
 import '../directives/dropdown-open.js';

package/dist/bundled/v2/directives/dropdown-close.js

@@ -2,8 +2,6 @@ import { isVue3 } from 'vue-demi';
 
 const created = (element, binding) => {
   element.addEventListener('keydown', event => {
-    event.preventDefault();
-    event.stopPropagation();
     if (['Escape'].includes(event.key)) {
       binding.value(event);
     }

package/dist/bundled/v2/directives/dropdown-open.js

@@ -2,15 +2,13 @@ import { isVue3 } from 'vue-demi';
 
 const created = (element, binding) => {
   element.addEventListener('keydown', event => {
-    event.preventDefault();
-    event.stopPropagation();
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
   element.addEventListener('click', event => {
-    event.preventDefault();
     event.stopPropagation();
+    event.preventDefault();
     binding.value(event);
   });
 };