@onereach/ui-components 4.8.0-beta.2865.0 → 4.8.0

package/dist/esm/v3/components/or-toast-v3/or-toast-container-v3/OrToastContainer.vue.d.ts

@@ -1,42 +1,7 @@
 import { PropType } from 'vue-demi';
 import { TransitionType } from '../props';
 import { Position, ToastBehaviour, ToastConfiguration } from '../types';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    on: (namedQueue: import("../composable/useToastEventBus").ToastEventsBusEvents, listener: import("@vueuse/core").EventBusListener<ToastConfiguration, any>) => void;
-    off: (namedQueue: import("../composable/useToastEventBus").ToastEventsBusEvents, listener: import("@vueuse/core").EventBusListener<ToastConfiguration, any>) => void;
-    classes: import("@vue/composition-api").ComputedRef<(string | {
-        'position--top--with-header': boolean;
-    })[]>;
-    transitionName: import("@vue/composition-api").ComputedRef<string>;
-    isActive: import("@vue/composition-api").Ref<boolean>;
-    toggle: (value?: boolean | undefined) => boolean;
-    addItem: (item: ToastConfiguration) => void;
-    removeItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => void;
-    clearAll: () => void;
-    getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
-    queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    createToast: (toastConfiguration: ToastConfiguration) => void;
-    toastUpdate: (toast: ToastConfiguration) => void;
-    toastRemove: (toast: ToastConfiguration) => void;
-    onToastEnter: (toast: ToastConfiguration) => void;
-    onToastLeave: (toast: ToastConfiguration) => void;
-    onClick: (toastBehaviour: ToastBehaviour) => void;
-    onToastHidden: () => void;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    includeHeaderHeight: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    position: {
-        type: PropType<Position>;
-        default: Position;
-    };
-    transition: {
-        type: PropType<TransitionType>;
-        default: TransitionType;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
+declare const _default: import("vue-demi").DefineComponent<{
     includeHeaderHeight: {
         type: BooleanConstructor;
         default: boolean;
@@ -49,25 +14,21 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<TransitionType>;
         default: TransitionType;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    includeHeaderHeight: boolean;
-    position: Position;
-    transition: TransitionType;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+}, {
     on: (namedQueue: import("../composable/useToastEventBus").ToastEventsBusEvents, listener: import("@vueuse/core").EventBusListener<ToastConfiguration, any>) => void;
     off: (namedQueue: import("../composable/useToastEventBus").ToastEventsBusEvents, listener: import("@vueuse/core").EventBusListener<ToastConfiguration, any>) => void;
-    classes: import("@vue/composition-api").ComputedRef<(string | {
+    classes: import("vue-demi").ComputedRef<(string | {
         'position--top--with-header': boolean;
     })[]>;
-    transitionName: import("@vue/composition-api").ComputedRef<string>;
-    isActive: import("@vue/composition-api").Ref<boolean>;
+    transitionName: import("vue-demi").ComputedRef<string>;
+    isActive: import("vue-demi").Ref<boolean>;
     toggle: (value?: boolean | undefined) => boolean;
     addItem: (item: ToastConfiguration) => void;
-    removeItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => void;
+    removeItem: (condition: (i: ToastConfiguration, index: number, queue: import("vue-demi").Ref<ToastConfiguration>[]) => boolean) => void;
     clearAll: () => void;
-    getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
-    queue: import("@vue/composition-api").ComputedRef<ToastConfiguration[]>;
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    getItem: (condition: (i: ToastConfiguration, index: number, queue: import("vue-demi").Ref<ToastConfiguration>[]) => boolean) => import("vue-demi").Ref<ToastConfiguration>;
+    queue: import("vue-demi").ComputedRef<ToastConfiguration[]>;
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
     createToast: (toastConfiguration: ToastConfiguration) => void;
     toastUpdate: (toast: ToastConfiguration) => void;
     toastRemove: (toast: ToastConfiguration) => void;
@@ -75,13 +36,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     onToastLeave: (toast: ToastConfiguration) => void;
     onClick: (toastBehaviour: ToastBehaviour) => void;
     onToastHidden: () => void;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    includeHeaderHeight: boolean;
-    position: Position;
-    transition: TransitionType;
-} & {}, {
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    includeHeaderHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<Position>;
+        default: Position;
+    };
+    transition: {
+        type: PropType<TransitionType>;
+        default: TransitionType;
+    };
+}>>, {
     includeHeaderHeight: boolean;
     position: Position;
     transition: TransitionType;
-}, true>);
+}>;
 export default _default;

package/dist/esm/v3/components/or-tooltip/OrTooltip.vue.d.ts

@@ -1,13 +1,6 @@
 import { PropType } from 'vue-demi';
 import { OrFloatingPlacements } from '../or-floating';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    trigger: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-}> & {
-    isShown: boolean;
-}, {
-    show(): void;
-    hide(): void;
-}, {}, {
+declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<boolean>;
         required: false;
@@ -33,7 +26,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: boolean;
     };
-}, import("@vue/composition-api").ExtractPropTypes<{
+}, {
+    trigger: import("vue-demi").Ref<HTMLElement | undefined>;
+}, {
+    isShown: boolean;
+}, {}, {
+    show(): void;
+    hide(): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "show" | "hide")[], "update:modelValue" | "show" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<boolean>;
         required: false;
@@ -59,34 +59,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: boolean;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: boolean;
-    isVisible: boolean;
-    placement: OrFloatingPlacements;
-    content: string;
-    triggerOnParent: boolean;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, import("@vue/composition-api").ShallowUnwrapRef<{
-    trigger: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-}>, {
-    isShown: boolean;
-}, {}, {
-    show(): void;
-    hide(): void;
-}, {}, {}, string[], {
-    modelValue: boolean;
-    isVisible: boolean;
-    placement: OrFloatingPlacements;
-    content: string;
-    triggerOnParent: boolean;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;
     isVisible: boolean;
     placement: OrFloatingPlacements;
     content: string;
     triggerOnParent: boolean;
-}, true>);
+}>;
 export default _default;

package/dist/esm/v3/components/or-tooltip/or-tooltip-content/OrTooltipContent.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {}, {}, {
+declare const _default: import("vue-demi").DefineComponent<{
     isShown: {
         type: PropType<boolean>;
         required: false;
@@ -10,7 +10,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: string;
     };
-}, import("@vue/composition-api").ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     isShown: {
         type: PropType<boolean>;
         required: false;
@@ -21,14 +21,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: string;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>>, {
     isShown: boolean;
     content: string;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    isShown: boolean;
-    content: string;
-} & {}, {
-    isShown: boolean;
-    content: string;
-}, true>);
+}>;
 export default _default;

package/dist/esm/v3/components/or-tooltip-v3/OrTooltip.vue.d.ts

@@ -1,14 +1,6 @@
 import { PropType } from 'vue-demi';
 import { TooltipPlacement } from './props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    state: import("@vue/composition-api").Ref<"open" | "closed">;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}> & import("@vue/composition-api").Data, {}, {}, {
+declare const _default: import("vue-demi").DefineComponent<{
     isOpen: {
         type: BooleanConstructor;
         default: boolean;
@@ -21,7 +13,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<TooltipPlacement>;
         default: TooltipPlacement;
     };
-}, import("@vue/composition-api").ExtractPropTypes<{
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    bodyStyles: import("vue-demi").ComputedRef<string[]>;
+    state: import("vue-demi").Ref<"open" | "closed">;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:state" | "open" | "close")[], "update:state" | "open" | "close", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
         default: boolean;
@@ -34,29 +34,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<TooltipPlacement>;
         default: TooltipPlacement;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    isOpen: boolean;
-    text: string;
-    placement: TooltipPlacement;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    state: import("@vue/composition-api").Ref<"open" | "closed">;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    isOpen: boolean;
-    text: string;
-    placement: TooltipPlacement;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}>> & {
+    "onUpdate:state"?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     isOpen: boolean;
     text: string;
     placement: TooltipPlacement;
-}, true>);
+}>;
 export default _default;

package/dist/esm/v3/directives/dropdown-close.d.ts

@@ -1,4 +1,6 @@
 import { DirectiveHook } from 'vue-demi';
 export declare const DropdownClose: {
-    [x: string]: DirectiveHook<any, import("vue-demi").VNode | null, any>;
+    [x: string]: DirectiveHook<any, import("vue-demi").VNode<any, any, {
+        [key: string]: any;
+    }> | null, any>;
 };

package/dist/esm/v3/directives/dropdown-open.d.ts

@@ -1,4 +1,6 @@
 import { DirectiveHook } from 'vue-demi';
 export declare const DropdownOpen: {
-    [x: string]: DirectiveHook<any, import("vue-demi").VNode | null, any>;
+    [x: string]: DirectiveHook<any, import("vue-demi").VNode<any, any, {
+        [key: string]: any;
+    }> | null, any>;
 };

package/dist/esm/v3/hooks/useResponsive/useResponsive.d.ts

@@ -1,5 +1,5 @@
 declare function useResponsive(): {
-    isMobile: import("@vue/composition-api").Ref<boolean>;
-    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("vue-demi").Ref<boolean>;
+    isDesktop: import("vue-demi").Ref<boolean>;
 };
 export default useResponsive;

package/dist/esm/v3/index.js

@@ -7,7 +7,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-c2b6aa9e.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-b9218f98.js';
-export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-dcfaa692.js';
+export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-8d41fafc.js';
 export { s as OrCardV3 } from './OrCard-cc82902c.js';
 export { s as OrCarousel } from './OrCarousel-5cc74f26.js';
 export { s as OrCarouselItem } from './OrCarouselItem-8c7ccd0f.js';
@@ -31,7 +31,7 @@ export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
 export { s as OrErrorV3 } from './OrError-c01d0c29.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-c016d8fa.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-df527763.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-83cd7ed7.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-1a9ccfe9.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-9f581536.js';
@@ -76,7 +76,7 @@ export { s as OrSearch } from './OrSearch-d0c8aca7.js';
 export { s as OrSearchV3 } from './OrSearch-c5ecb005.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-359fbf3a.js';
 export { s as OrSelect } from './OrSelect-60205145.js';
-export { s as OrSelectV3 } from './OrSelect-9432ac4d.js';
+export { s as OrSelectV3 } from './OrSelect-c931ed6e.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-7f5795da.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-5fb7a6a1.js';
@@ -114,7 +114,6 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-a1332
 export { s as OrTooltip } from './OrTooltip-c1006713.js';
 export { s as OrTooltipContent } from './OrTooltipContent-c0042844.js';
 export { s as OrTooltipV3 } from './OrTooltip-3025564a.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-fc699d3b.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-a50ec347.js';
@@ -164,28 +163,6 @@ import 'lodash/keyBy';
 import 'lodash/range';
 import './styles-ed564e39.js';
 import 'lodash/isNil';
-import 'prosemirror-markdown';
-import 'prosemirror-model';
-import '@tiptap/extension-paragraph';
-import '@tiptap/extension-bullet-list';
-import '@tiptap/extension-list-item';
-import '@tiptap/extension-ordered-list';
-import '@tiptap/extension-strike';
-import '@tiptap/extension-italic';
-import '@tiptap/extension-hard-break';
-import '@tiptap/extension-bold';
-import '@tiptap/extension-code-block';
-import '@tiptap/extension-blockquote';
-import '@tiptap/extension-link';
-import '@tiptap/extension-highlight';
-import '@tiptap/extension-underline';
-import '@tiptap/core';
-import '@tiptap/starter-kit';
-import '@tiptap/extension-heading';
-import '@tiptap/extension-placeholder';
-import './codemirrorView-be2c7423.js';
-import 'prosemirror-state';
-import 'prosemirror-commands';
 
 function getAbbreviation(text, limit) {
   var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.8.0-beta.2865.0",
+  "version": "4.8.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -31,32 +31,15 @@
     "switch:vue3": "node scripts/swap-vue.js 3 && vue-demi-switch 3 vue3"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.2.3",
-    "@codemirror/lang-css": "6.2.0",
-    "@codemirror/lang-html": "6.4.3",
-    "@codemirror/lang-javascript": "6.1.7",
-    "@codemirror/lang-json": "6.0.1",
-    "@codemirror/lang-markdown": "6.1.1",
+    "@codemirror/commands": "^6.2.1",
+    "@codemirror/lang-css": "6.0.0",
+    "@codemirror/lang-html": "6.1.0",
+    "@codemirror/lang-javascript": "6.0.2",
+    "@codemirror/lang-json": "6.0.0",
+    "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
     "@onereach/styles": "^2.40.1",
     "@splidejs/splide": "4.0.6",
-    "@tiptap/core": "2.0.3",
-    "@tiptap/extension-blockquote": "2.0.3",
-    "@tiptap/extension-bold": "2.0.3",
-    "@tiptap/extension-bullet-list": "2.0.3",
-    "@tiptap/extension-code-block": "2.0.3",
-    "@tiptap/extension-hard-break": "2.0.3",
-    "@tiptap/extension-heading": "2.0.3",
-    "@tiptap/extension-highlight": "2.0.3",
-    "@tiptap/extension-italic": "2.0.3",
-    "@tiptap/extension-link": "2.0.3",
-    "@tiptap/extension-list-item": "2.0.3",
-    "@tiptap/extension-ordered-list": "2.0.3",
-    "@tiptap/extension-paragraph": "2.0.3",
-    "@tiptap/extension-placeholder": "2.0.3",
-    "@tiptap/extension-strike": "2.0.3",
-    "@tiptap/extension-underline": "2.0.3",
-    "@tiptap/starter-kit": "2.0.3",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",
@@ -65,11 +48,9 @@
     "@vueuse/math": "9.5.0",
     "codemirror": "6.0.1",
     "focus-trap": "7.2.0",
-    "prosemirror-markdown": "1.10.1",
     "sortablejs": "1.14.0",
     "tailwindcss": "3.1.3",
-    "uuid": "8.3.2",
-    "vue-demi": "0.13.11"
+    "uuid": "8.3.2"
   },
   "devDependencies": {
     "@babel/preset-env": "7.18.10",
@@ -81,7 +62,6 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/vue3": "6.5.16",
     "@types/faker": "5.5.9",
-    "@types/marked": "4.0.8",
     "@vue/composition-api": "1.7.1",
     "faker": "5.5.3",
     "glob": "9.3.0",
@@ -174,5 +154,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "4784d40d9d9c4f4efb399b7f6b9f496968a4dbbb"
 }

package/src/components/index.ts

@@ -103,4 +103,3 @@ export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';
 export * from './or-tooltip-v3';
-export * from './or-rich-text-editor-v3';

package/src/components/or-card-collection-v3/styles.ts

@@ -6,6 +6,10 @@ export const CardCollectionRoot: string[] = [
 
   // Spacing
   'gap-md',
+  'max-h-full',
+
+  // Overflow
+  'overflow-hidden',
 ];
 
 export const CardCollectionToolbar: string[] = [
@@ -34,6 +38,9 @@ export const CardCollectionContent: string[] = [
 
   // Spacing
   'gap-sm md:gap-md',
+
+  // Overflow
+  'overflow-auto',
 ];
 
 export const CardCollectionContentViews: Record<DefaultCardCollectionViews, string[]> = {

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -9,13 +9,14 @@
         :class="headerStyles"
         :tabindex="!disabled ? 0 : null"
         :disabled="disabled ? '' : null"
-        @click.stop="expanded ? close(): open()"
+        @click.stop="toggle()"
       >
         <OrIcon
-          :class="[expanded ? 'rotate-0' : 'rotate-[-90deg]']"
+          :class="[state === 'open' ? 'rotate-0' : 'rotate-[-90deg]']"
           :icon="'expand_more'"
           :variant="'filled-bold'"
         />
+
         <span class="truncate">
           {{ label }}
         </span>
@@ -26,17 +27,18 @@
       </div>
     </div>
 
-    <div v-show="expanded">
+    <div v-show="state === 'open'">
       <slot />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { usePopoverState } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
-import { ExpansionPanelAddon, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelRoot, ExpansionPanelRootVariants } from './styles';
+import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
+import { ExpansionPanel, ExpansionPanelAddon, ExpansionPanelBackgroundColors, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelVariants } from './styles';
 
 export default defineComponent({
   name: 'OrExpansionPanel',
@@ -52,20 +54,25 @@ export default defineComponent({
     },
 
     isOpen: {
-      type: Boolean as PropType<boolean>,
+      type: Boolean,
       default: false,
     },
 
     variant: {
-      type: String as PropType<ExpansionPanelVariant>,
+      type: String as PropType<`${ExpansionPanelVariant}`>,
       default: ExpansionPanelVariant.Default,
     },
 
     color: {
-      type: String as PropType<ExpansionPanelColor>,
+      type: String as PropType<`${ExpansionPanelColor}`>,
       default: ExpansionPanelColor.Default,
     },
 
+    backgroundColor: {
+      type: String as PropType<`${ExpansionPanelBackgroundColor}`>,
+      default: ExpansionPanelBackgroundColor.Primary,
+    },
+
     disabled: {
       type: Boolean,
       default: false,
@@ -73,14 +80,20 @@ export default defineComponent({
   },
 
   emits: [
+    'update:state',
+
     'open',
     'close',
   ],
 
   expose: [
     'root',
+
+    'state',
+
     'open',
     'close',
+    'toggle',
   ],
 
   setup(props, context) {
@@ -90,8 +103,9 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-expansion-panel-v3',
-      ...ExpansionPanelRoot,
-      ...ExpansionPanelRootVariants[props.variant],
+      ...ExpansionPanel,
+      ...ExpansionPanelVariants[props.variant],
+      ...ExpansionPanelBackgroundColors[`${props.backgroundColor}-${props.variant}`],
     ]);
 
     const headerStyles = computed(() => [
@@ -104,38 +118,17 @@ export default defineComponent({
     ]);
 
     // State
-    const expanded = ref(false);
-
-    // Events
-    watch(expanded, (value) => {
-      context.emit(value ? 'open' : 'close');
-    });
-
-    watch(() => props.isOpen, (newIsOpen) => {
-      if (newIsOpen) {
-        open();
-      } else {
-        close();
-      }
-    }, { immediate: true });
-
-    // Methods
-    function open(): void {
-      expanded.value = true;
-    }
-
-    function close(): void {
-      expanded.value = false;
-    }
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
 
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
-      expanded,
+      state,
       open,
       close,
+      toggle,
     };
   },
 });

package/src/components/or-expansion-panel-v3/props.ts

@@ -7,3 +7,9 @@ export enum ExpansionPanelColor {
   Default = 'default',
   Danger = 'danger',
 }
+
+export enum ExpansionPanelBackgroundColor {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Inherit = 'inherit',
+}