@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/es/CSSTransition/CSSTransition.js

@@ -0,0 +1,153 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useRef } from "react";
+import {
+  addClass as addOneClass,
+  removeClass as removeOneClass
+} from "@bifrostui/utils";
+import Transition from "../Transition";
+const forceReflow = (node) => node.scrollTop;
+const benchAddClass = (node, classes) => node && classes && classes.split(" ").forEach((c) => addOneClass(node, c));
+const benchRemoveClass = (node, classes) => node && classes && classes.split(" ").forEach((c) => removeOneClass(node, c));
+const CSSTransition = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, { classNames = "" } = _a, others = __objRest(_a, ["classNames"]);
+    const appliedClasses = useRef({
+      appear: {},
+      enter: {},
+      exit: {}
+    });
+    const getClassNames = (type) => {
+      const isStringClassNames = typeof classNames === "string";
+      const prefix = isStringClassNames && classNames ? `${classNames}-` : "";
+      if (isStringClassNames) {
+        return {
+          baseClassName: `${prefix}${type}`,
+          activeClassName: `${prefix}${type}-active`,
+          doneClassName: `${prefix}${type}-done`
+        };
+      }
+      return {
+        baseClassName: classNames == null ? void 0 : classNames[type],
+        activeClassName: classNames == null ? void 0 : classNames[`${type}Active`],
+        doneClassName: classNames == null ? void 0 : classNames[`${type}Done`]
+      };
+    };
+    const addClass = (node, type, phase) => {
+      const className = getClassNames(type)[`${phase}ClassName`];
+      if (phase === "active") {
+        if (node)
+          forceReflow(node);
+      }
+      if (className) {
+        appliedClasses.current[type][phase] = className;
+        benchAddClass(node, className);
+      }
+    };
+    const removeClasses = (node, type) => {
+      const {
+        base: baseClassName,
+        active: activeClassName,
+        done: doneClassName
+      } = appliedClasses.current[type];
+      appliedClasses.current[type] = {};
+      if (baseClassName) {
+        benchRemoveClass(node, baseClassName);
+      }
+      if (activeClassName) {
+        benchRemoveClass(node, activeClassName);
+      }
+      if (doneClassName) {
+        benchRemoveClass(node, doneClassName);
+      }
+    };
+    const onEnter = (node) => {
+      removeClasses(node, "exit");
+      addClass(node, "enter", "base");
+      if (props.onEnter) {
+        props.onEnter(node);
+      }
+    };
+    const onEntering = (node) => {
+      addClass(node, "enter", "active");
+      if (props.onEntering) {
+        props.onEntering(node);
+      }
+    };
+    const onEntered = (node) => {
+      removeClasses(node, "enter");
+      addClass(node, "enter", "done");
+      if (props.onEntered) {
+        props.onEntered(node);
+      }
+    };
+    const onExit = (node) => {
+      removeClasses(node, "enter");
+      addClass(node, "exit", "base");
+      if (props.onExit) {
+        props.onExit(node);
+      }
+    };
+    const onExiting = (node) => {
+      addClass(node, "exit", "active");
+      if (props.onExiting) {
+        props.onExiting(node);
+      }
+    };
+    const onExited = (node) => {
+      removeClasses(node, "exit");
+      addClass(node, "exit", "done");
+      if (props.onExited) {
+        props.onExited(node);
+      }
+    };
+    return /* @__PURE__ */ React.createElement(
+      Transition,
+      __spreadProps(__spreadValues({
+        ref,
+        delay: 0
+      }, others), {
+        onEnter,
+        onEntered,
+        onEntering,
+        onExit,
+        onExiting,
+        onExited
+      })
+    );
+  }
+);
+CSSTransition.displayName = "BuiCSSTransition";
+var CSSTransition_default = CSSTransition;
+export {
+  CSSTransition_default as default
+};

package/es/CSSTransition/CSSTransition.types.js

@@ -0,0 +1 @@
+export {};

package/es/CSSTransition/demo/CSSTransitionDemo.js

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { Button, Alert, CSSTransition } from "@bifrostui/react";
+import "./index.css";
+const StackDemo = () => {
+  const [open, setOpen] = useState(true);
+  const transitionClasses = {
+    enter: "slide-enter",
+    enterActive: "slide-enter-active",
+    enterDone: "slide-enter-done",
+    exit: "slide-exit",
+    exitActive: "slide-exit-active",
+    exitDone: "slide-exit-done"
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: "300px",
+        height: "100px",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: () => {
+          setOpen((prev) => !prev);
+        }
+      },
+      open ? "Exit" : "Enter"
+    ),
+    /* @__PURE__ */ React.createElement(
+      CSSTransition,
+      {
+        in: open,
+        timeout: 300,
+        unmountOnExit: false,
+        classNames: transitionClasses
+      },
+      /* @__PURE__ */ React.createElement(Alert, { className: "my-node", color: "success" }, "\u8FC7\u6E21\u8FC7\u7A0B\u4E2D\u4F1A\u4FEE\u6539className")
+    )
+  );
+};
+var CSSTransitionDemo_default = StackDemo;
+export {
+  CSSTransitionDemo_default as default
+};

package/es/CSSTransition/demo/index.css

@@ -0,0 +1,25 @@
+.bui-btn {
+  margin-bottom: 18px;
+}
+.slide-enter {
+  transform: translate3d(-100%, 0, 0);
+}
+.slide-enter-active {
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: transform 300ms ease 0ms;
+}
+.slide-enter-done {
+  transform: translate3d(0%, 0, 0);
+}
+.slide-exit {
+  transform: translate3d(0%, 0, 0);
+}
+.slide-exit-active {
+  will-change: transform;
+  transform: translate3d(-100%, 0, 0);
+  transition: transform 300ms ease 0ms;
+}
+.slide-exit-done {
+  transform: translate3d(-100%, 0, 0);
+}

package/es/CSSTransition/index.js

@@ -0,0 +1,6 @@
+import { default as default2, default as default3 } from "./CSSTransition";
+export * from "./CSSTransition.types";
+export {
+  default3 as CSSTransition,
+  default2 as default
+};

package/es/Calendar/Calendar.js

@@ -29,16 +29,20 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { CaretLeftIcon, CaretRightIcon } from "@bifrostui/icons";
-import { useDidMountEffect, useValue } from "@bifrostui/utils";
+import React, { useMemo, useState, useRef } from "react";
 import clsx from "clsx";
 import dayjs from "dayjs";
 import isoWeek from "dayjs/plugin/isoWeek";
-import React, { useMemo, useState } from "react";
-import { formatDate, isRange, isSame } from "./utils";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { CaretLeftIcon, CaretRightIcon } from "@bifrostui/icons";
+import { useDidMountEffect, useValue } from "@bifrostui/utils";
+import CSSTransition from "../CSSTransition";
+import TransitionGroup from "../TransitionGroup";
 import { useLocaleText } from "../locales";
+import { formatDate, isDateInRange, isSame, isEqualVal } from "./utils";
 import "./index.css";
 dayjs.extend(isoWeek);
+dayjs.extend(customParseFormat);
 const classes = {
   root: "bui-calendar",
   handler: "bui-calendar-handler",
@@ -61,6 +65,9 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       headerBarRightIcon,
       disabledDate,
       highlightDate = "today",
+      headerVisible = false,
+      enableTransition = false,
+      CSSTransitionProps,
       dateRender,
       weekRender,
       onMonthChange,
@@ -78,6 +85,9 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       "headerBarRightIcon",
       "disabledDate",
       "highlightDate",
+      "headerVisible",
+      "enableTransition",
+      "CSSTransitionProps",
       "dateRender",
       "weekRender",
       "onMonthChange",
@@ -110,12 +120,10 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       defaultValue: formattedDefaultValue,
       onChange
     });
-    const selectedStartDate = useMemo(() => {
-      return calendarValue == null ? void 0 : calendarValue[0];
-    }, [calendarValue]);
-    const selectedEndDate = useMemo(() => {
-      return calendarValue == null ? void 0 : calendarValue[1];
+    const [selectedStartDate, selectedEndDate] = useMemo(() => {
+      return [calendarValue == null ? void 0 : calendarValue[0], calendarValue == null ? void 0 : calendarValue[1]];
     }, [calendarValue]);
+    const slideDirection = useRef("");
     const isMinMonth = dayjs(minDate).isSame(renderMonth, "month");
     const isMaxMonth = dayjs(maxDate).isSame(renderMonth, "month");
     const headerBarIcon = {
@@ -134,10 +142,23 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
         }
       )
     };
+    const prevValueRef = useRef(value);
     useDidMountEffect(() => {
-      const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
-      setRenderMonth(dayjs(initMonth || minDate).toDate());
-    }, [JSON.stringify(value), JSON.stringify(defaultValue)]);
+      if (!isEqualVal(prevValueRef.current, value)) {
+        const latestDate = formattedValue == null ? void 0 : formattedValue[0];
+        const lastInitialValue = renderMonth;
+        const inSameMonth = isRangeMode && selectedStartDate && selectedEndDate || latestDate && dayjs(latestDate).isSame(lastInitialValue, "month");
+        if (!inSameMonth) {
+          const latestBeforeThanLast = dayjs(latestDate).isBefore(
+            lastInitialValue,
+            "month"
+          );
+          slideDirection.current = latestBeforeThanLast ? "right" : "left";
+          setRenderMonth(dayjs(latestDate || minDate).toDate());
+        }
+        prevValueRef.current = value;
+      }
+    }, [JSON.stringify(value)]);
     const getDaysInMonth = (args) => {
       const m = dayjs(args).format("YYYY/MM");
       const count = dayjs(m).daysInMonth();
@@ -159,7 +180,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       }
       [...Array(count)].forEach((_, i) => {
         const day = dayjs(`${m}/${i + 1}`).toDate();
-        const defaultDisable = !isRange(day, minDate, maxDate);
+        const defaultDisable = !isDateInRange(day, minDate, maxDate);
         const propsDisable = disabledDate ? !!(disabledDate == null ? void 0 : disabledDate(day)) : false;
         list.push({
           day,
@@ -208,7 +229,9 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
             classes.day,
             (ins == null ? void 0 : ins.disabled) && classes.disabled,
             dayClassName
-          )
+          ),
+          "aria-disabled": ins == null ? void 0 : ins.disabled,
+          "aria-current": dayjs(ins.day).isSame(dayjs(), "day") ? "date" : void 0
         },
         ins.day && dayjs(ins.day).format("D")
       );
@@ -235,9 +258,11 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       const hasSelectedDate = selectedStartDate && isSame(ins.day, selectedStartDate);
       triggerChange == null ? void 0 : triggerChange(e, hasSelectedDate ? null : ins.day);
     };
-    const renderDayList = () => getDaysInMonth(renderMonth).map(
-      (ins, index) => {
+    const renderDayList = () => {
+      const days = getDaysInMonth(renderMonth);
+      return days.map((ins, index) => {
         const dayStr = dayjs(ins.day).format("YYYYMMDD");
+        const isSelected = selectedStartDate && isSame(selectedStartDate, ins.day) || selectedEndDate && isSame(selectedEndDate, ins.day);
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -245,16 +270,20 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
               [`${classes.root}-highlight-day`]: highlightDate === "weekend" && !ins.disabled && (index % 7 === 0 || index % 7 === 6)
             }),
             key: `${dayStr}-${index}`,
-            onClick: (e) => onClickDay(e, ins)
+            onClick: (e) => onClickDay(e, ins),
+            "aria-selected": isSelected,
+            "aria-disabled": ins.disabled,
+            tabIndex: ins.disabled ? -1 : 0
           },
           dateRender ? dateRender(ins) : defaultDateRender(ins)
         );
-      }
-    );
+      });
+    };
     const onClickPrev = (e) => {
       if (!isMinMonth) {
         const month = dayjs(renderMonth).subtract(1, "month").toDate();
         setRenderMonth(month);
+        slideDirection.current = "right";
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "prev",
           month: dayjs(month).format(headerBarFormat)
@@ -265,38 +294,106 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       if (!isMaxMonth) {
         const month = dayjs(renderMonth).add(1, "month").toDate();
         setRenderMonth(month);
+        slideDirection.current = "left";
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "next",
           month: dayjs(month).format(headerBarFormat)
         });
       }
     };
-    let data = {};
-    if (isRangeMode) {
-      data = {
-        "data-start": dayjs(selectedStartDate).format("YYYYMMDD"),
-        "data-end": dayjs(selectedEndDate).format("YYYYMMDD")
-      };
-    } else {
-      data = {
-        "data-selected": dayjs(selectedStartDate).format("YYYYMMDD")
+    const data = isRangeMode ? {
+      "data-start": dayjs(selectedStartDate).format("YYYYMMDD"),
+      "data-end": dayjs(selectedEndDate).format("YYYYMMDD")
+    } : {
+      "data-selected": dayjs(selectedStartDate).format("YYYYMMDD")
+    };
+    const renderMonthDate = () => {
+      const hasSlideDirection = !!slideDirection.current;
+      const monthDateDom = /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(`${classes.root}-month`, {
+            "enable-transition": enableTransition,
+            visible: enableTransition && !hasSlideDirection
+          }),
+          "aria-label": "date select"
+        },
+        renderDayList()
+      );
+      if (!enableTransition) {
+        return monthDateDom;
+      }
+      const transitionClasses = {
+        exit: hasSlideDirection && "slide-exit",
+        exitActive: hasSlideDirection && `slide-exit-${slideDirection.current}`,
+        enter: hasSlideDirection && `slide-enter-${slideDirection.current}`,
+        enterActive: hasSlideDirection && "slide-active",
+        enterDone: "slide-enter-done"
       };
-    }
+      return /* @__PURE__ */ React.createElement(
+        TransitionGroup,
+        {
+          className: clsx(`${classes.root}-transition-group`),
+          childFactory: (element) => {
+            return React.cloneElement(element, {
+              classNames: transitionClasses
+            });
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          CSSTransition,
+          __spreadProps(__spreadValues({
+            timeout: 300
+          }, CSSTransitionProps), {
+            in: true,
+            appear: hasSlideDirection,
+            mountOnEnter: true,
+            unmountOnExit: true,
+            key: renderMonth.toString(),
+            classNames: transitionClasses
+          }),
+          monthDateDom
+        )
+      );
+    };
     return /* @__PURE__ */ React.createElement(
       "div",
-      __spreadValues(__spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         ref,
         className: clsx(classes.root, className, {
           [`${classes.root}-highlight-weekend`]: highlightDate === "weekend"
         })
       }, others), {
         "data-mode": mode
-      }), data),
-      /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, headerBarIcon.left), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text` }, dayjs(renderMonth).format(headerBarFormat)), /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, headerBarIcon.right)),
-      /* @__PURE__ */ React.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
+      }), data), {
+        role: "application",
+        "aria-label": "Calendar"
+      }),
+      !headerVisible && /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          role: "button",
+          onClick: onClickPrev,
+          className: `${classes.handler}-btn`,
+          "aria-label": "prev month",
+          tabIndex: 0
+        },
+        headerBarIcon.left
+      ), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text`, "aria-live": "polite" }, dayjs(renderMonth).format(headerBarFormat)), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          role: "button",
+          onClick: onClickNext,
+          className: `${classes.handler}-btn`,
+          "aria-label": "next month",
+          tabIndex: 0
+        },
+        headerBarIcon.right
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w, idx) => {
         return weekRender ? weekRender(w) : /* @__PURE__ */ React.createElement("div", { key: w, className: `${classes.week}-item` }, w);
       })),
-      /* @__PURE__ */ React.createElement("div", { className: clsx(`${classes.root}-month`) }, renderDayList())
+      renderMonthDate()
     );
   }
 );

package/es/Calendar/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,8 @@
+import React from "react";
+import Calendar from "../../Calendar";
+const CalendarDemo = () => {
+  return /* @__PURE__ */ React.createElement(Calendar, null);
+};
+export {
+  CalendarDemo
+};

package/es/Calendar/index.css

@@ -1,21 +1,24 @@
 :root,
 page,
 xhs-page {
+  --bui-calendar-transition-exit: transform 300ms ease 0ms;
+  --bui-calendar-transition-enter: transform 300ms ease 0ms;
+  --bui-calendar-transition-group-min-height: 228px;
   --bui-calendar-padding: 6px 12px 7px;
   --bui-calendar-week-height: 30px;
   --bui-calendar-handler-height: 28px;
-  --bui-calendar-handler-margin-bottom: 7px;
+  --bui-calendar-handler-margin: 0 0 7px 0;
   --bui-calendar-handler-text-width: 80px;
   --bui-calendar-handler-btn-width: 46px;
   --bui-calendar-handler-btn-height: 100%;
   --bui-calendar-handler-btn-icon-font-size: 28px;
   --bui-calendar-day-box-height: 30px;
-  --bui-calendar-day-box-margin-bottom: 7px;
+  --bui-calendar-day-box-margin: 0 0 7px 0;
   --bui-calendar-day-disabled-color: #9c9ca5;
   --bui-calendar-middle-color: #000;
-  --bui-calendar-middle-background-color: #ffeaf1;
+  --bui-calendar-middle-bg-color: #ffeaf1;
   --bui-calendar-range-both-ends-color: #000;
-  --bui-calendar-range-both-ends-background-color: #ffc7da;
+  --bui-calendar-range-both-ends-bg-color: #ffc7da;
 }
 .bui-calendar {
   overflow: hidden;
@@ -52,7 +55,7 @@ xhs-page {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: var(--bui-calendar-handler-margin-bottom);
+  margin-bottom: var(--bui-calendar-handler-margin);
 }
 .bui-calendar-handler-text {
   width: var(--bui-calendar-handler-text-width);
@@ -72,15 +75,28 @@ xhs-page {
 .bui-calendar-handler-btn-icon {
   font-size: var(--bui-calendar-handler-btn-icon-font-size);
 }
+.bui-calendar-transition-group {
+  position: relative;
+  min-height: var(--bui-calendar-transition-group-min-height);
+}
 .bui-calendar-month {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--bui-spacing-sm);
 }
+.bui-calendar-month.enable-transition {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+.bui-calendar-month.visible {
+  visibility: visible;
+}
 .bui-calendar-day-box {
   width: 14.28%;
   height: var(--bui-calendar-day-box-height);
-  margin-bottom: var(--bui-calendar-day-box-margin-bottom);
+  margin: var(--bui-calendar-day-box-margin);
 }
 .bui-calendar-highlight-day .bui-calendar-day {
   color: var(--bui-color-primary);
@@ -106,11 +122,11 @@ xhs-page {
 .bui-calendar-middle {
   color: var(--bui-calendar-middle-color);
   border-radius: 0;
-  background-color: var(--bui-calendar-middle-background-color);
+  background-color: var(--bui-calendar-middle-bg-color);
 }
 .bui-calendar-start {
   color: var(--bui-calendar-range-both-ends-color);
-  background-color: var(--bui-calendar-range-both-ends-background-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
 }
 .bui-calendar-range {
   border-top-right-radius: 0;
@@ -118,7 +134,34 @@ xhs-page {
 }
 .bui-calendar-end {
   color: var(--bui-calendar-range-both-ends-color);
-  background-color: var(--bui-calendar-range-both-ends-background-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+.bui-calendar .slide-enter-left {
+  transform: translate3d(100%, 0, 0);
+}
+.bui-calendar .slide-enter-right {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-enter-done {
+  visibility: visible;
+}
+.bui-calendar .slide-exit {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-exit);
+}
+.bui-calendar .slide-active {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-enter);
+}
+.bui-calendar .slide-exit-left {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-exit-right {
+  transform: translate3d(100%, 0, 0);
+}