Refactor

components/lib/componentbase/ComponentBase.js

@@ -233,10 +233,30 @@ const baseStyles = `
     box-sizing: border-box;
 }
 
+.p-hidden {
+    display: none;
+}
+
 .p-hidden-space {
     visibility: hidden;
 }
 
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.p-hidden-accessible input,
+.p-hidden-accessible select {
+    transform: scale(0);
+}
+
 .p-reset {
     margin: 0;
     padding: 0;
@@ -261,21 +281,29 @@ const baseStyles = `
     height: 100%;
 }
 
+.p-overflow-hidden {
+    overflow: hidden;
+}
+
 .p-unselectable-text {
     user-select: none;
 }
 
-.p-sr-only {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
+.p-scrollbar-measure {
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
     position: absolute;
-    width: 1px;
-    word-wrap: normal !important;
+    top: -9999px;
+}
+
+@-webkit-keyframes p-fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+@keyframes p-fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
 }
 
 .p-link {
@@ -292,7 +320,7 @@ const baseStyles = `
 	cursor: default;
 }
 
-/* Non vue overlay animations */
+/* Non react overlay animations */
 .p-connected-overlay {
     opacity: 0;
     transform: scaleY(0.8);
@@ -310,43 +338,67 @@ const baseStyles = `
     transition: opacity .1s linear;
 }
 
-/* Vue based overlay animations */
-.p-connected-overlay-enter-from {
+/* React based overlay animations */
+.p-connected-overlay-enter {
     opacity: 0;
     transform: scaleY(0.8);
 }
 
-.p-connected-overlay-leave-to {
-    opacity: 0;
-}
-
 .p-connected-overlay-enter-active {
+    opacity: 1;
+    transform: scaleY(1);
     transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 
-.p-connected-overlay-leave-active {
+.p-connected-overlay-enter-done {
+    transform: none;
+}
+
+.p-connected-overlay-exit {
+    opacity: 1;
+}
+
+.p-connected-overlay-exit-active {
+    opacity: 0;
     transition: opacity .1s linear;
 }
 
 /* Toggleable Content */
-.p-toggleable-content-enter-from,
-.p-toggleable-content-leave-to {
+.p-toggleable-content-enter {
     max-height: 0;
 }
 
-.p-toggleable-content-enter-to,
-.p-toggleable-content-leave-from {
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    max-height: 1000px;
+    transition: max-height 1s ease-in-out;
+}
+
+.p-toggleable-content-enter-done {
+    transform: none;
+}
+
+.p-toggleable-content-exit {
     max-height: 1000px;
 }
 
-.p-toggleable-content-leave-active {
+.p-toggleable-content-exit-active {
     overflow: hidden;
+    max-height: 0;
     transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
 }
 
-.p-toggleable-content-enter-active {
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
     overflow: hidden;
-    transition: max-height 1s ease-in-out;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
 }
 
 .p-menu .p-menuitem-link {
@@ -487,7 +539,7 @@ export const ComponentBase = {
     }
 };
 
-export const useHandleStyle = (styles, isUnstyled, { name, styled = false }) => {
+export const useHandleStyle = (styles, isUnstyled = false, { name, styled = false }) => {
     const { load: loadCommonStyle, unload: unloadCommonStyle } = useStyle(baseStyles, { name: 'common', manual: true });
     const { load, unload } = useStyle(styles, { name: name, manual: true });