@onereach/ui-components 4.7.5 → 4.7.6

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-c931ed6e.js';
+export { s as OrSelectV3 } from '../../OrSelect-9432ac4d.js';
 export { I as SelectSize } from '../../OrInputBox-32814878.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
@@ -12,8 +12,7 @@ import '../../OrLabel-4da56db0.js';
 import 'vue';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrError-c01d0c29.js';
-import '../../OrExpansionPanel-df527763.js';
-import '../../usePopoverState-8a95a300.js';
+import '../../OrExpansionPanel-c016d8fa.js';
 import '../../OrIcon-62793572.js';
 import '../../OrHint-06ab89d7.js';
 import '../../OrInput-a303f924.js';
@@ -21,6 +20,7 @@ import '../../useResponsive-a02e95b7.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrIconButton-0aaadc68.js';
 import '../../OrTooltip-3025564a.js';
+import '../../usePopoverState-8a95a300.js';
 import '../../OrPopover-337df396.js';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';

package/dist/esm/v3/index.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 { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-df527763.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-c016d8fa.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-c931ed6e.js';
+export { s as OrSelectV3 } from './OrSelect-9432ac4d.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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.7.5",
+  "version": "4.7.6",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -155,5 +155,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "7f847df360021cf81d62c83583de7acea0964a1b"
+  "gitHead": "29bb1b07850eb0d9511876bb4a40d9ca8c434bb6"
 }

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

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

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

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

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

@@ -1,11 +1,11 @@
-import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
+import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
 
-export const ExpansionPanel: string[] = [
+export const ExpansionPanelRoot: string[] = [
   // Layout
   'layout-column',
 ];
 
-export const ExpansionPanelVariants: Record<ExpansionPanelVariant, string[]> = {
+export const ExpansionPanelRootVariants: Record<ExpansionPanelVariant, string[]> = {
   'default': [
     // Spacing
     'gap-sm',
@@ -20,33 +20,11 @@ export const ExpansionPanelVariants: Record<ExpansionPanelVariant, string[]> = {
     'py-md',
 
     'gap-md',
-  ],
-};
-
-export const ExpansionPanelBackgroundColors: Record<`${ExpansionPanelBackgroundColor}-${ExpansionPanelVariant}`, string[]> = {
-  'primary-default': [],
 
-  'primary-card': [
     // Theme
     'theme-background-surface-1',
     'dark:theme-background-surface-1-dark',
   ],
-
-  'secondary-default': [],
-
-  'secondary-card': [
-    // Theme
-    'theme-background-surface-3',
-    'dark:theme-background-surface-3-dark',
-  ],
-
-  'inherit-default': [],
-
-  'inherit-card': [
-    // Theme
-    'theme-background-inherit',
-    'dark:theme-background-inherit',
-  ],
 };
 
 export const ExpansionPanelHeader: string[] = [