Migrated cascadeselect

components/lib/themes/primeone/base/cascadeselect/index.js

@@ -80,7 +80,7 @@ export default {
 
 .p-cascadeselect-label-empty {
     overflow: hidden;
-    opacity: 0;
+    visibility: hidden;
 }
 
 .p-fluid .p-cascadeselect {
@@ -90,5 +90,104 @@ export default {
 .p-fluid .p-cascadeselect .p-cascadeselect-label {
     width: 1%;
 }
+
+.p-cascadeselect-panel {
+    background: ${dt('cascadeselect.overlay.background')};
+    color: ${dt('cascadeselect.overlay.color')};
+    border: 1px solid ${dt('cascadeselect.overlay.border.color')};
+    border-radius: ${dt('rounded.base')};
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.p-cascadeselect .p-cascadeselect-panel {
+    min-width: 100%;
+}
+
+.p-cascadeselect-sublist {
+    position: absolute;
+    min-width: 100%;
+    z-index: 1;
+    display: none;
+}
+
+.p-cascadeselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    min-width: 100%;
+    padding: 0.25rem 0.25rem;
+}
+
+.p-cascadeselect-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    margin: 2px 0;
+    border: 0 none;
+    color: ${dt('cascadeselect.item.color')};
+    background: transparent;
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    border-radius: ${dt('rounded.sm')};
+}
+
+.p-cascadeselect-item:first-child {
+    margin-top: 0;
+}
+
+.p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+}
+
+.p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    background: ${dt('cascadeselect.item.focus.background')};
+    color: ${dt('cascadeselect.item.focus.color')};
+}
+
+.p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
+    color: ${dt('cascadeselect.item.icon.focus.color')};
+}
+
+.p-cascadeselect-item.p-highlight {
+    background: ${dt('cascadeselect.item.selected.background')};
+    color: ${dt('cascadeselect.item.selected.color')};
+}
+
+.p-cascadeselect-item.p-highlight.p-focus {
+    background: ${dt('cascadeselect.item.selected.focus.background')};
+    color: ${dt('cascadeselect.item.selected.focus.color')};
+}
+
+.p-cascadeselect-item-active {
+    overflow: visible;
+}
+
+.p-cascadeselect-item-active > .p-cascadeselect-sublist {
+    display: block;
+    left: 100%;
+    top: 0;
+}
+
+.p-cascadeselect-item-content {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+    padding: 0.5rem 0.75rem;
+}
+
+.p-cascadeselect-group-icon {
+    margin-left: auto;
+    font-size: 0.875rem;
+    color: ${dt('cascadeselect.item.icon.color')};
+}
+
+.p-cascadeselect-enter-from,
+.p-cascadeselect-leave-active {
+    opacity: 0;
+}
+
+.p-cascadeselect-enter-active {
+    transition: opacity 150ms;
+}
 `
 };

components/lib/themes/primeone/presets/aura/cascadeselect/index.js

@@ -17,11 +17,47 @@ export default {
         light: {
             toggle: {
                 color: '{surface.400}'
+            },
+            overlay: {
+                background: '{surface.0}',
+                borderColor: '{surface.200}',
+                color: '{surface.700}'
+            },
+            item: {
+                focusBackground: '{surface.100}',
+                selectedBackground: '{highlight.background}',
+                selectedFocusBackground: '{highlight.focus.background}',
+                color: '{surface.700}',
+                focusColor: '{surface.800}',
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}',
+                icon: {
+                    color: '{surface.400}',
+                    focusColor: '{surface.500}'
+                }
             }
         },
         dark: {
             toggle: {
                 color: '{surface.400}'
+            },
+            overlay: {
+                background: '{surface.900}',
+                borderColor: '{surface.700}',
+                color: '{surface.0}'
+            },
+            item: {
+                focusBackground: '{surface.800}',
+                selectedBackground: '{highlight.background}',
+                selectedFocusBackground: '{highlight.focus.background}',
+                color: '{surface.0}',
+                focusColor: '{surface.0}',
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}',
+                icon: {
+                    color: '{surface.500}',
+                    focusColor: '{surface.400}'
+                }
             }
         }
     }

components/lib/themes/primeone/presets/aura/dropdown/index.js

@@ -33,7 +33,7 @@ export default {
             item: {
                 focusBackground: '{surface.100}',
                 selectedBackground: '{highlight.background}',
-                selectedBackgroundFocus: '{highlight.focus.background}',
+                selectedFocusBackground: '{highlight.focus.background}',
                 color: '{surface.700}',
                 focusColor: '{surface.800}',
                 selectedColor: '{highlight.color}',
@@ -62,7 +62,7 @@ export default {
             item: {
                 focusBackground: '{surface.800}',
                 selectedBackground: '{highlight.background}',
-                selectedBackgroundFocus: '{highlight.focus.background}',
+                selectedFocusBackground: '{highlight.focus.background}',
                 color: '{surface.0}',
                 focusColor: '{surface.0}',
                 selectedColor: '{highlight.color}',