@jobber/components 4.20.4 → 4.20.5-JOB-70296.10

package/AnimatedSwitcher.d.ts

@@ -0,0 +1 @@
+export * from "./dist/AnimatedSwitcher";

package/AnimatedSwitcher.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AnimatedSwitcher = require("./dist/AnimatedSwitcher");
+
+Object.keys(AnimatedSwitcher).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AnimatedSwitcher[key];
+    },
+  });
+});

package/dist/AnimatedSwitcher/AnimatedSwitcher.d.ts

@@ -0,0 +1,31 @@
+import { ReactElement } from "react";
+import { IconNames } from "@jobber/design";
+export interface AnimatedSwitcherProps {
+    /**
+     * Determines when to switch the component to the `switchTo` prop.
+     *
+     * @default false
+     */
+    readonly switched: boolean;
+    /**
+     * The component that shows up when the `switched` prop is `false`
+     */
+    readonly initialChild: ReactElement;
+    /**
+     * The component that shows up when the `switched` prop is `true`
+     */
+    readonly switchTo: ReactElement;
+    /**
+     * Change the transition between 2 elements.
+     */
+    readonly type?: "slideFromBottom" | "fade";
+}
+export declare function AnimatedSwitcher({ initialChild, switched, switchTo, type, }: AnimatedSwitcherProps): JSX.Element;
+export declare namespace AnimatedSwitcher {
+    var Icon: ({ switchToIcon, switched, initialIcon, }: AnimatedSwitcherIconProps) => JSX.Element;
+}
+interface AnimatedSwitcherIconProps extends Pick<AnimatedSwitcherProps, "switched"> {
+    readonly initialIcon: IconNames;
+    readonly switchToIcon: IconNames;
+}
+export {};

package/dist/AnimatedSwitcher/index.d.ts

@@ -0,0 +1 @@
+export * from "./AnimatedSwitcher";

package/dist/AnimatedSwitcher/index.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var Icon = require('../Icon-405a216c.js');
+require('@jobber/design');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const DURATION_SIMPLE = 0.1;
+const DURATION_AVERAGE = 0.2;
+const FADE = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const SLIDE_IN_UP = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "10%", opacity: 0 },
+};
+const SLIDE_IN_DOWN = {
+    visible: { y: 0, opacity: 1 },
+    hidden: { y: "-10%", opacity: 0 },
+};
+const SPIN_COUNTER_CLOCK_WISE = {
+    visible: {
+        rotate: 0,
+        scale: 1,
+        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
+    },
+    hidden: {
+        rotate: 180,
+        scale: 0.6,
+        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
+    },
+};
+const SPIN_CLOCK_WISE = {
+    visible: {
+        rotate: 0,
+        scale: 1,
+        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
+    },
+    hidden: {
+        rotate: -180,
+        scale: 0.6,
+        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
+    },
+};
+
+function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
+    const [ref, setRef] = React.useState(null);
+    const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
+    const { key, transition, child, duration } = getChildData();
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true, initial: false },
+        React__default["default"].createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
+    function getDisplayValue() {
+        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
+            return window.getComputedStyle(ref.firstElementChild).display;
+        }
+    }
+    function getChildData() {
+        let data = { key: `${initialChild.type}_1`, child: initialChild };
+        if (switched) {
+            data = { key: `${switchTo.type}_2`, child: switchTo };
+        }
+        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
+    }
+    function getTransitionType() {
+        if (isSwitchingBetweenIcons) {
+            if (switched)
+                return SPIN_COUNTER_CLOCK_WISE;
+            return SPIN_CLOCK_WISE;
+        }
+        else if (type === "fade") {
+            return FADE;
+        }
+        else {
+            if (switched)
+                return SLIDE_IN_UP;
+            return SLIDE_IN_DOWN;
+        }
+    }
+    function getTransitionDuration() {
+        switch (type) {
+            case "fade":
+                return DURATION_AVERAGE;
+            default:
+                return DURATION_SIMPLE;
+        }
+    }
+}
+AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
+    return (React__default["default"].createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default["default"].createElement(Icon.Icon, { name: initialIcon }), switchTo: React__default["default"].createElement(Icon.Icon, { name: switchToIcon }) }));
+};
+
+exports.AnimatedSwitcher = AnimatedSwitcher;

package/dist/AnimatedSwitcher/transitions.d.ts

@@ -0,0 +1,8 @@
+import { Variants } from "framer-motion";
+export declare const DURATION_SIMPLE = 0.1;
+export declare const DURATION_AVERAGE = 0.2;
+export declare const FADE: Variants;
+export declare const SLIDE_IN_UP: Variants;
+export declare const SLIDE_IN_DOWN: Variants;
+export declare const SPIN_COUNTER_CLOCK_WISE: Variants;
+export declare const SPIN_CLOCK_WISE: Variants;

package/dist/InputText/InputText.d.ts

@@ -11,7 +11,7 @@ export interface InputTextRef {
 export declare const InputText: React.ForwardRefExoticComponent<({
     readonly multiline: true;
     readonly rows?: number | RowRange | undefined;
-    readonly align?: "center" | "right" | undefined;
+    readonly align?: "right" | "center" | undefined;
     readonly description?: string | undefined;
     readonly disabled?: boolean | undefined;
     readonly invalid?: boolean | undefined;
@@ -23,10 +23,10 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly placeholder?: string | undefined;
     readonly size?: "large" | "small" | undefined;
     readonly value?: string | number | Date | undefined;
-    readonly defaultValue?: string | Date | undefined;
-    readonly prefix?: import("../FormField").Affix | undefined;
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
+    readonly defaultValue?: string | Date | undefined;
+    readonly prefix?: import("../FormField").Affix | undefined;
     readonly autocomplete?: boolean | import("../FormField").AutocompleteTypes | undefined;
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
     readonly keyboard?: "numeric" | "decimal" | undefined;
@@ -48,7 +48,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
 } | {
     rows?: undefined;
     multiline?: boolean | undefined;
-    readonly align?: "center" | "right" | undefined;
+    readonly align?: "right" | "center" | undefined;
     readonly description?: string | undefined;
     readonly disabled?: boolean | undefined;
     readonly invalid?: boolean | undefined;
@@ -60,10 +60,10 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly placeholder?: string | undefined;
     readonly size?: "large" | "small" | undefined;
     readonly value?: string | number | Date | undefined;
-    readonly defaultValue?: string | Date | undefined;
-    readonly prefix?: import("../FormField").Affix | undefined;
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
+    readonly defaultValue?: string | Date | undefined;
+    readonly prefix?: import("../FormField").Affix | undefined;
     readonly autocomplete?: boolean | import("../FormField").AutocompleteTypes | undefined;
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
     readonly keyboard?: "numeric" | "decimal" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.20.4",
+  "version": "4.20.5-JOB-70296.10+1855d88a",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.42.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.1.4",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "de341e0c56a93a5da991120a3e74041aeffb583d"
+  "gitHead": "1855d88a1d48436ff054e3292de099a7a1e98467"
 }