@fibery/ui-kit 3.0.0 → 4.1.0

package/src/antd/global-overrides.ts

@@ -0,0 +1,352 @@
+import {css} from "@linaria/core";
+
+import {themeVars, transitions} from "../design-system";
+
+// Port of antd@4 antd/lib/style/default.css base reset (the section before .clearfix/.anticon
+// and the animation keyframes — those belong to components we no longer ship or have inlined
+// in their own wrapper styles). dt#1205 inlined the antd wrappers and dropped the antd CSS
+// bundle; the whole reboot vanished. Most consequential losses were `html, body {width:100%;
+// height:100%}` (absolute-positioned descendants suddenly resolve to 0×0) and the universal
+// `box-sizing: border-box` (every component that omits the declaration falls back to
+// content-box → padding+border overflow → clipping → "content not displayed").
+export const globalOverrides = css`
+  :global() {
+    // FIXME: scope to the React root instead of html/body — current rule is what gives
+    // WebLayout's position:absolute inset:0 descendant a viewport-sized box.
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+    }
+
+    input::-ms-clear,
+    input::-ms-reveal {
+      display: none;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    html {
+      font-family: sans-serif;
+      line-height: 1.15;
+      -webkit-text-size-adjust: 100%;
+      -webkit-tap-highlight-color: ${themeVars.transparent};
+    }
+
+    // body sizing/font/color + scrollbar rules live in fibery-ui/index.html so they apply
+    // before the JS bundle (Linaria CSS chunk) loads — keeps loading splash and any
+    // pre-React DOM rendered correctly without reflow.
+
+    input[readonly] {
+      cursor: default;
+    }
+
+    // react-split-pane handle classes. Only mounted after React renders.
+    .Resizer {
+      background: ${themeVars.colorAccent};
+      opacity: 0;
+      z-index: 1000;
+      box-sizing: border-box;
+      background-clip: padding-box;
+    }
+    .Resizer:hover {
+      transition: all 0.2s ease-in;
+      opacity: 1;
+    }
+    .Resizer.vertical {
+      width: 10px;
+      margin: 0 -5px;
+      border-left: 4px solid ${themeVars.transparent};
+      border-right: 4px solid ${themeVars.transparent};
+      cursor: col-resize;
+    }
+    .Resizer.disabled {
+      cursor: not-allowed;
+    }
+    .Resizer.disabled:hover {
+      border-color: ${themeVars.transparent};
+    }
+
+    // Removes the focus ring on programmatically-focused containers (Modal, Drawer).
+    [tabindex="-1"]:focus {
+      outline: none !important;
+    }
+
+    hr {
+      box-sizing: content-box;
+      height: 0;
+      overflow: visible;
+    }
+
+    // FIXME: heading/paragraph/list/blockquote/figure/pre margins are antd's typography
+    // opinions. We mostly style headings via Linaria classes, but unstyled <h*> in plain
+    // markdown/HTML content rely on these. Audit + move to a typography module.
+    // Heading color lives in fibery-ui/index.html (load-bearing pre-React).
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: 0;
+      margin-bottom: 0.5em;
+      font-weight: 500;
+    }
+    p {
+      margin-top: 0;
+      margin-bottom: 1em;
+    }
+    abbr[title],
+    abbr[data-original-title] {
+      text-decoration: underline dotted;
+      border-bottom: 0;
+      cursor: help;
+    }
+    address {
+      margin-bottom: 1em;
+      font-style: normal;
+      line-height: inherit;
+    }
+    input[type="text"],
+    input[type="password"],
+    input[type="number"],
+    textarea {
+      -webkit-appearance: none;
+    }
+    ol,
+    ul,
+    dl {
+      margin-top: 0;
+      margin-bottom: 1em;
+    }
+    ol ol,
+    ul ul,
+    ol ul,
+    ul ol {
+      margin-bottom: 0;
+    }
+    dt {
+      font-weight: 500;
+    }
+    dd {
+      margin-bottom: 0.5em;
+      margin-left: 0;
+    }
+    blockquote {
+      margin: 0 0 1em;
+    }
+    dfn {
+      font-style: italic;
+    }
+    b,
+    strong {
+      font-weight: bolder;
+    }
+    small {
+      font-size: 80%;
+    }
+    sub,
+    sup {
+      position: relative;
+      font-size: 75%;
+      line-height: 0;
+      vertical-align: baseline;
+    }
+    sub {
+      bottom: -0.25em;
+    }
+    sup {
+      top: -0.5em;
+    }
+
+    // Link colors used to come from PatchAntdStylesPlugin substituting antd's #1890ff
+    // for our token; sourcing from themeVars now. antd's transition was 0.3s ≈ transitions.slow.
+    a {
+      color: ${themeVars.linkColor};
+      text-decoration: none;
+      background-color: transparent;
+      outline: none;
+      cursor: pointer;
+      transition: color ${transitions.slow};
+    }
+    a:hover {
+      color: ${themeVars.linkHoverColor};
+    }
+    a:active {
+      color: ${themeVars.linkColor};
+    }
+    a:focus {
+      text-decoration: none;
+      outline: 0;
+    }
+    a[disabled] {
+      color: ${themeVars.disabledInversedTextColor};
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    pre,
+    code,
+    kbd,
+    samp {
+      font-size: 1em;
+      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 1em;
+      overflow: auto;
+    }
+    figure {
+      margin: 0 0 1em;
+    }
+    img {
+      vertical-align: middle;
+      border-style: none;
+    }
+    svg:not(:root) {
+      overflow: hidden;
+    }
+
+    // touch-action: manipulation suppresses the 300ms tap delay on mobile.
+    a,
+    area,
+    button,
+    [role="button"],
+    input:not([type="range"]),
+    label,
+    select,
+    summary,
+    textarea {
+      touch-action: manipulation;
+    }
+
+    table {
+      border-collapse: collapse;
+    }
+    caption {
+      padding-top: 0.75em;
+      padding-bottom: 0.3em;
+      color: ${themeVars.disabledTextColor};
+      text-align: left;
+      caption-side: bottom;
+    }
+
+    // Form-control font inheritance. Without this every <button>/<input>/<select>/<textarea>
+    // renders in UA font (Times-ish on most platforms) — every form in the app would break.
+    input,
+    button,
+    select,
+    optgroup,
+    textarea {
+      margin: 0;
+      color: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      line-height: inherit;
+    }
+    button,
+    input {
+      overflow: visible;
+    }
+    button,
+    select {
+      text-transform: none;
+    }
+    // Restores native button rendering on iOS Safari for type=reset/submit and bare [type=button].
+    button,
+    html [type="button"],
+    [type="reset"],
+    [type="submit"] {
+      -webkit-appearance: button;
+    }
+    button::-moz-focus-inner,
+    [type="button"]::-moz-focus-inner,
+    [type="reset"]::-moz-focus-inner,
+    [type="submit"]::-moz-focus-inner {
+      padding: 0;
+      border-style: none;
+    }
+    input[type="radio"],
+    input[type="checkbox"] {
+      box-sizing: border-box;
+      padding: 0;
+    }
+    // Forces date/time inputs into listbox appearance (Safari otherwise collapses them).
+    input[type="date"],
+    input[type="time"],
+    input[type="datetime-local"],
+    input[type="month"] {
+      -webkit-appearance: listbox;
+    }
+    textarea {
+      overflow: auto;
+      resize: vertical;
+    }
+    fieldset {
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+    legend {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 0.5em;
+      padding: 0;
+      color: inherit;
+      font-size: 1.5em;
+      line-height: inherit;
+      white-space: normal;
+    }
+    progress {
+      vertical-align: baseline;
+    }
+    [type="number"]::-webkit-inner-spin-button,
+    [type="number"]::-webkit-outer-spin-button {
+      height: auto;
+    }
+    [type="search"] {
+      outline-offset: -2px;
+      -webkit-appearance: none;
+    }
+    [type="search"]::-webkit-search-cancel-button,
+    [type="search"]::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+    ::-webkit-file-upload-button {
+      font: inherit;
+      -webkit-appearance: button;
+    }
+    output {
+      display: inline-block;
+    }
+    summary {
+      display: list-item;
+    }
+    template {
+      display: none;
+    }
+    [hidden] {
+      display: none !important;
+    }
+    mark {
+      padding: 0.2em;
+      background-color: ${themeVars.infoBox};
+    }
+
+    ::-moz-selection {
+      color: ${themeVars.textColor};
+      background: ${themeVars.textSelectionColor};
+    }
+    ::selection {
+      color: ${themeVars.textColor};
+      background: ${themeVars.textSelectionColor};
+    }
+  }
+`;

package/src/antd/index.tsx

@@ -1,8 +1,9 @@
-import type {InputProps} from "antd/lib/input";
+import type {ComponentProps} from "react";
 
 import {StyledInput, StyledTextArea} from "./input";
 
 export const AntInput = StyledInput;
 export const AntTextArea = StyledTextArea;
 
-export type AntInputProps = InputProps;
+// infer from the wrapper so status/bordered/wrapper props are included
+export type AntInputProps = ComponentProps<typeof AntInput>;

package/src/antd/input-number.tsx

@@ -1,52 +1,138 @@
 import {css} from "@linaria/core";
-import "antd/lib/input-number/style/css";
-import InputNumber from "antd/lib/input-number";
+import InputNumber from "rc-input-number-v7";
+import type {ComponentProps} from "react";
+import {forwardRef} from "react";
 
-import {textStyles, themeVars} from "../design-system";
+import {textStyles, themeVars, transitionDuration} from "../design-system";
+import ArrowBottomIcon from "../icons/react/arrow-bottom";
+import ArrowTopIcon from "../icons/react/arrow-top";
 import {getWrapper} from "./get-wrapper";
 import {inputOverrides} from "./styles";
 import {wrapWith} from "./utils";
 
+type InputNumberPropsAny = ComponentProps<typeof InputNumber>;
+
+// rc-input-number renders empty .ant-input-number-handler-up/-down-inner spans unless
+// upNode/downNode are passed. antd's wrapper supplied chevron icons; we do the same.
+const upNode = <ArrowTopIcon className="ant-input-number-handler-up-inner" iconSize={12} />;
+const downNode = <ArrowBottomIcon className="ant-input-number-handler-down-inner" iconSize={12} />;
+
+const PrefixedInputNumber = forwardRef<HTMLInputElement, InputNumberPropsAny>(function PrefixedInputNumber(props, ref) {
+  return <InputNumber prefixCls="ant-input-number" upHandler={upNode} downHandler={downNode} {...props} ref={ref} />;
+});
+
 const inputNumberStyles = css`
   ${{
     "& .ant-input-number": {
+      boxSizing: "border-box",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "stretch",
+      width: "90px",
       height: "auto",
       border: "none",
       ...textStyles.regular,
       backgroundColor: themeVars.transparent,
     },
+    "& .ant-input-number-input-wrap": {
+      flex: 1,
+      minWidth: 0,
+    },
+    "& .ant-input-number-input": {
+      ...inputOverrides.main,
+      boxSizing: "border-box",
+      width: "100%",
+      height: "100%",
+      appearance: "textfield",
+    },
+    "& .ant-input-number-input:placeholder-shown": {
+      textOverflow: "ellipsis",
+    },
+    "& .ant-input-number-input::-webkit-inner-spin-button, & .ant-input-number-input::-webkit-outer-spin-button": {
+      margin: 0,
+      appearance: "none",
+    },
     "& .ant-input-number-handler-wrap": {
+      position: "absolute",
       top: 1,
       bottom: 1,
       right: 1,
-      height: "auto",
+      width: 22,
       backgroundColor: themeVars.transparent,
       background: themeVars.transparent,
+      // antd hid the stepper arrows until hover/focus; reproduce that (dropped with the vendored CSS)
+      opacity: 0,
+      transition: `opacity ${transitionDuration.normal} linear ${transitionDuration.faster}`,
     },
+    "& .ant-input-number-handler-wrap:hover .ant-input-number-handler": {
+      height: "40%",
+    },
+    "& .ant-input-number:hover .ant-input-number-handler-wrap, & .ant-input-number-focused .ant-input-number-handler-wrap":
+      {
+        opacity: 1,
+      },
     "& .ant-input-number-focused": {boxShadow: "none"},
+    "& .ant-input-number-handler-up, & .ant-input-number-handler-down": {
+      cursor: "pointer",
+    },
+    "& .ant-input-number-handler-up:hover, & .ant-input-number-handler-down:hover": {
+      height: "60% !important",
+    },
+    "& .ant-input-number-handler-up-disabled, & .ant-input-number-handler-down-disabled": {
+      cursor: "not-allowed",
+    },
+    "& .ant-input-number-handler-up-disabled .ant-input-number-handler-up-inner, & .ant-input-number-handler-down-disabled .ant-input-number-handler-down-inner":
+      {
+        color: themeVars.disabledTextColor,
+      },
+    "& .ant-input-number-handler:not(.ant-input-number-handler-up-disabled):not(.ant-input-number-handler-down-disabled):hover .ant-input-number-handler-up-inner, & .ant-input-number-handler:not(.ant-input-number-handler-up-disabled):not(.ant-input-number-handler-down-disabled):hover .ant-input-number-handler-down-inner":
+      {
+        color: themeVars.textColor,
+      },
     "& .ant-input-number-handler-down": {borderTop: `${themeVars.borderSolidSeparator} !important`},
     "& .ant-input-number-input:hover": inputOverrides.hover,
     "& .ant-input-number-input:focus, & .ant-input-number-input:active, & .ant-input-number-focused .ant-input-number-input":
       inputOverrides.focus,
-    "& .ant-input-number-input": inputOverrides.main,
     "& .ant-input-number-disabled": {backgroundColor: themeVars.transparent},
     "& .ant-input-number-disabled .ant-input-number-input": inputOverrides.disabled,
+    "& .ant-input-number-disabled .ant-input-number-handler-wrap, & .ant-input-number-readonly .ant-input-number-handler-wrap":
+      {
+        display: "none",
+      },
     "& .ant-input-number-handler-up-inner, &  .ant-input-number-handler-down-inner": {
       color: themeVars.iconColor,
+      position: "absolute",
+      right: 4,
+      width: 12,
+      height: 12,
+      lineHeight: "12px",
+      transition: `all ${transitionDuration.faster} linear`,
+      userSelect: "none",
+    },
+    "& .ant-input-number-handler-up-inner": {
+      top: "50%",
+      marginTop: -5,
+    },
+    "& .ant-input-number-handler-down-inner": {
+      top: "50%",
+      transform: "translateY(-50%)",
     },
     "& .ant-input-number-handler": {
+      position: "relative",
+      display: "block",
+      width: "100%",
+      height: "50%",
+      overflow: "hidden",
       color: themeVars.iconColor,
+      lineHeight: 0,
+      textAlign: "center",
       borderLeft: themeVars.borderSolidSeparator,
+      transition: `all ${transitionDuration.faster} linear`,
       "&:active": {
         backgroundColor: themeVars.transparent,
       },
-      "&:hover": {
-        "& .ant-input-number-handler-up-inner, &  .ant-input-number-handler-down-inner": {
-          color: themeVars.textColor,
-        },
-      },
     },
   }}
 `;
 
-export const AntInputNumber = wrapWith(getWrapper(inputNumberStyles), InputNumber);
+export const AntInputNumber = wrapWith(getWrapper(inputNumberStyles), PrefixedInputNumber);

package/src/antd/input.tsx

@@ -1,14 +1,91 @@
-import {css} from "@linaria/core";
-import Input from "antd/lib/input";
-import "antd/lib/input/style/css";
+import {css, cx} from "@linaria/core";
+import RcInput from "rc-input";
+import type {InputProps, InputRef} from "rc-input";
+import RcTextArea from "rc-textarea";
+import type {TextAreaProps} from "rc-textarea";
+import type {ResizableTextAreaRef} from "rc-textarea/lib/ResizableTextArea";
+import {forwardRef, useImperativeHandle, useMemo, useRef} from "react";
 
-import {tabularNumsOff, textStyles, themeVars} from "../design-system";
+import {space, tabularNumsOff, textStyles, themeVars} from "../design-system";
+import CloseCircleFilledIcon from "../icons/react/cross-circle";
 import {mobileRootSelector} from "../mobile-styles";
 import {getWrapper} from "./get-wrapper";
 import {inputStyles} from "./styles";
 import {wrapWith} from "./utils";
 
-const TextArea = Input.TextArea;
+const clearIconNode = <CloseCircleFilledIcon />;
+
+export type {InputRef};
+
+export interface InputFocusOptions extends FocusOptions {
+  cursor?: "start" | "end" | "all";
+}
+
+export interface TextAreaRef {
+  focus: (options?: InputFocusOptions) => void;
+  blur: () => void;
+  resizableTextArea?: ResizableTextAreaRef;
+}
+
+type AntInputProps = Omit<InputProps, "status"> & {
+  status?: "error";
+  bordered?: boolean;
+};
+
+const Input = forwardRef<InputRef, AntInputProps>(function Input(
+  {status, className, allowClear, bordered = true, ...props},
+  ref
+) {
+  const statusClass = status === "error" ? "ant-input-status-error" : undefined;
+  const allowClearProp = useMemo(() => {
+    if (allowClear === true) {
+      return {clearIcon: clearIconNode};
+    }
+    return allowClear;
+  }, [allowClear]);
+  return (
+    <RcInput
+      prefixCls="ant-input"
+      ref={ref}
+      allowClear={allowClearProp}
+      className={cx(className, statusClass, !bordered && "ant-input-borderless")}
+      {...props}
+    />
+  );
+});
+
+type AntTextAreaProps = Omit<TextAreaProps, "status"> & {
+  status?: "error";
+};
+
+const TextArea = forwardRef<TextAreaRef, AntTextAreaProps>(function TextArea({status, className, ...props}, ref) {
+  const innerRef = useRef<RcTextArea>(null);
+  useImperativeHandle(ref, () => ({
+    focus: (options) => {
+      const textarea = innerRef.current?.resizableTextArea?.textArea;
+      if (!textarea) {
+        return;
+      }
+      textarea.focus(options);
+      const len = textarea.value.length;
+      if (options?.cursor === "start") {
+        textarea.setSelectionRange(0, 0);
+      } else if (options?.cursor === "end") {
+        textarea.setSelectionRange(len, len);
+      } else if (options?.cursor === "all") {
+        textarea.setSelectionRange(0, len);
+      }
+    },
+    blur: () => innerRef.current?.blur(),
+    get resizableTextArea() {
+      return innerRef.current?.resizableTextArea;
+    },
+  }));
+  const statusClass = status === "error" ? "ant-input-status-error" : undefined;
+  return (
+    <RcTextArea prefixCls="ant-input" ref={innerRef} className={cx("ant-input", className, statusClass)} {...props} />
+  );
+});
 
 export const transparentInputStyle = css`
   ${{
@@ -18,6 +95,7 @@ export const transparentInputStyle = css`
     "& input, & textarea, & .ant-input-affix-wrapper": {
       padding: 0,
       border: "none",
+      outline: "none",
       width: "100%",
       resize: "none",
       borderRadius: 0,
@@ -29,6 +107,50 @@ export const transparentInputStyle = css`
         ...textStyles.big,
       },
     },
+    "& .ant-input-affix-wrapper": {
+      display: "inline-flex",
+      alignItems: "center",
+      position: "relative",
+      minWidth: 0,
+    },
+    "& .ant-input-affix-wrapper > .ant-input": {
+      flex: 1,
+      minWidth: 0,
+      fontSize: "inherit",
+      border: "none",
+      outline: "none",
+    },
+    "& .ant-input-affix-wrapper > .ant-input:focus": {
+      boxShadow: "none !important",
+    },
+    "& .ant-input-affix-wrapper::before": {
+      width: 0,
+      visibility: "hidden",
+      content: "'\\a0'",
+    },
+    "& .ant-input-prefix, & .ant-input-suffix": {
+      display: "flex",
+      flex: "none",
+      alignItems: "center",
+    },
+    "& .ant-input-prefix > *:not(:last-child), & .ant-input-suffix > *:not(:last-child)": {
+      marginRight: space.s8,
+    },
+    "& .ant-input-prefix": {
+      marginRight: space.s4,
+    },
+    "& .ant-input-suffix": {
+      marginLeft: space.s4,
+    },
+    "& .ant-input-clear-icon": {
+      display: "inline-flex",
+      alignItems: "center",
+      lineHeight: 1,
+      cursor: "pointer",
+    },
+    "& .ant-input-clear-icon-hidden": {
+      visibility: "hidden",
+    },
     "& textarea.ant-input": {
       fontVariant: "inherit",
     },
@@ -54,8 +176,5 @@ export const StyledTextArea = wrapWith(InputWrapper, TextArea);
 
 export const TransparentInputWrapper = getWrapper(transparentInputStyle);
 
-export type TextAreaRef = React.ElementRef<typeof TextArea>;
 export const AntTransparentTextArea = wrapWith(TransparentInputWrapper, TextArea);
-
-export type InputRef = React.ElementRef<typeof Input>;
 export const AntTransparentInput = wrapWith(TransparentInputWrapper, Input);