@onereach/ui-components 4.7.4 → 4.7.5

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-9432ac4d.js';
+export { s as OrSelectV3 } from '../../OrSelect-c931ed6e.js';
 export { I as SelectSize } from '../../OrInputBox-32814878.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
@@ -12,7 +12,8 @@ import '../../OrLabel-4da56db0.js';
 import 'vue';
 import '../../style-inject.es-4c6f2515.js';
 import '../../OrError-c01d0c29.js';
-import '../../OrExpansionPanel-c016d8fa.js';
+import '../../OrExpansionPanel-df527763.js';
+import '../../usePopoverState-8a95a300.js';
 import '../../OrIcon-62793572.js';
 import '../../OrHint-06ab89d7.js';
 import '../../OrInput-a303f924.js';
@@ -20,7 +21,6 @@ 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 { 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';

package/package.json

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

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',
+}

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

@@ -1,11 +1,11 @@
-import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
+import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
 
-export const ExpansionPanelRoot: string[] = [
+export const ExpansionPanel: string[] = [
   // Layout
   'layout-column',
 ];
 
-export const ExpansionPanelRootVariants: Record<ExpansionPanelVariant, string[]> = {
+export const ExpansionPanelVariants: Record<ExpansionPanelVariant, string[]> = {
   'default': [
     // Spacing
     'gap-sm',
@@ -20,11 +20,33 @@ export const ExpansionPanelRootVariants: 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[] = [