addon-ui 0.4.1 → 0.5.0

package/src/components/Viewport/Provider.tsx

@@ -17,12 +17,21 @@ import styles from "./viewport.module.scss";
 
 export type ViewportProps = ComponentProps<"div"> & {
     mode?: ViewportMode;
+    transition?: boolean;
 };
 
 const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<ViewportProps>> = (
-    {children, className, style, mode: viewportMode = ViewportMode.Adaptive, ...props},
+    {
+        children,
+        className,
+        style,
+        mode: viewportMode = ViewportMode.Adaptive,
+        transition: viewportTransition = true,
+        ...props
+    },
     ref
 ) => {
+    const [transition, withTransition] = useState(viewportTransition);
     const [mode, setModeState] = useState<ViewportMode>(viewportMode);
     const [sizes, setSizesState] = useState<ViewportSizes | null>(null);
 
@@ -40,6 +49,7 @@ const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<Viewp
             setSizes,
             setMode,
             resetSizes,
+            withTransition
         }),
         [mode, setSizes, setMode, resetSizes]
     );
@@ -81,6 +91,7 @@ const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<Viewp
                 className={classnames(
                     styles["viewport"],
                     {
+                        [styles["viewport--transition"]]: transition,
                         [styles["viewport--expanded"]]: mode === ViewportMode.Expanded,
                         [styles["viewport--fixed"]]: mode === ViewportMode.Fixed,
                     },

package/src/components/Viewport/context.ts

@@ -20,6 +20,8 @@ export interface ViewportContract {
 
     setSizes(sizes: ViewportSizes): void;
 
+    withTransition(transition: boolean): void;
+
     resetSizes(): void;
 }
 
@@ -30,6 +32,8 @@ export const ViewportContext = createContext<ViewportContract>({
 
     setSizes() {},
 
+    withTransition() {},
+
     resetSizes() {},
 });
 

package/src/components/Viewport/viewport.module.scss

@@ -6,13 +6,15 @@
   max-width: var(--viewport-max-width);
   min-height: var(--viewport-min-height);
   max-height: var(--viewport-max-height);
-  transition:
-    height var(--transition-speed-md) ease-in-out,
-    width var(--transition-speed-md) ease-in-out,
-    min-height var(--transition-speed-md) ease-in-out,
-    min-width var(--transition-speed-md) ease-in-out,
-    max-height var(--transition-speed-md) ease-in-out,
-    max-width var(--transition-speed-md) ease-in-out;
+
+  &--transition {
+    transition: height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    width var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    min-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    min-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    max-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    max-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out;
+  }
 
   &--expanded {
     min-height: var(--viewport-max-height);

package/src/components/types.ts

@@ -58,7 +58,7 @@ export interface ComponentsProps {
         | "radius"
         | "color"
     >;
-    tooltip?: TooltipProps;
+    tooltip?: Omit<TooltipProps, "content">;
     view?: ViewProps;
     viewDrawer?: ViewDrawerProps;
     viewModal?: ViewModalProps;

package/src/providers/ui/styles/reset.scss

@@ -123,5 +123,7 @@ body {
   will-change: background-color, color;
   transition:
     background-color var(--transition-speed-md),
+    border-color var(--transition-speed-md),
+    background var(--transition-speed-md),
     color var(--transition-speed-md);
 }

package/src/styles/mixins.scss

@@ -22,6 +22,12 @@
   }
 }
 
+@mixin view($view) {
+  html[view="#{$view}"] & {
+    @content;
+  }
+}
+
 @mixin browser($browser) {
   html[browser="#{$browser}"] & {
     @content;

package/src/types/shims/addon-ui-config.d.ts

@@ -0,0 +1,5 @@
+declare module "addon-ui-config" {
+    import type {Config} from "../config";
+    const config: Config;
+    export default config;
+}

package/src/types/vendors/odometer.d.ts

@@ -0,0 +1,17 @@
+declare module "odometer" {
+    interface OdometerOptions {
+        el: Element;
+        value?: number;
+        format?: string;
+        theme?: string;
+        duration?: number;
+    }
+
+    export default class Odometer {
+        constructor(options: OdometerOptions);
+
+        value: number;
+
+        update(newValue: number): void;
+    }
+}