@a-type/ui 4.1.0-beta.5 → 4.1.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/input/Input.d.ts +3 -1
- package/dist/cjs/components/input/Input.js +5 -1
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/input/Input.stories.d.ts +3 -1
- package/dist/cjs/components/textArea/TextArea.d.ts +3 -1
- package/dist/cjs/components/textArea/TextArea.stories.d.ts +3 -1
- package/dist/esm/components/input/Input.d.ts +3 -1
- package/dist/esm/components/input/Input.js +5 -1
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/input/Input.stories.d.ts +3 -1
- package/dist/esm/components/textArea/TextArea.d.ts +3 -1
- package/dist/esm/components/textArea/TextArea.stories.d.ts +3 -1
- package/package.json +1 -1
- package/src/components/input/Input.tsx +13 -1
|
@@ -13,6 +13,8 @@ export interface InputProps extends Omit<BaseInputProps, 'className'> {
|
|
|
13
13
|
ref?: Ref<HTMLInputElement>;
|
|
14
14
|
}
|
|
15
15
|
export declare const Input: (({ className, borderRef, startAccessory, endAccessory, ...props }: InputProps) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
16
|
-
Border: import("react").FunctionComponent<import("react").
|
|
16
|
+
Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
17
|
+
ref?: Ref<HTMLDivElement>;
|
|
18
|
+
}>;
|
|
17
19
|
Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: InputProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
18
20
|
};
|
|
@@ -21,10 +21,14 @@ const input_1 = require("@base-ui/react/input");
|
|
|
21
21
|
const clsx_1 = __importDefault(require("clsx"));
|
|
22
22
|
const hooks_js_1 = require("../../hooks.js");
|
|
23
23
|
const useRotatingShuffledValue_js_1 = require("../../hooks/useRotatingShuffledValue.js");
|
|
24
|
+
const GroupScale_js_1 = require("../../systems/GroupScale.js");
|
|
24
25
|
const inputs_js_1 = require("../../systems/inputs.js");
|
|
25
26
|
exports.inputClassName = (0, clsx_1.default)('layer-components:min-w-60px layer-components:flex-1 layer-components:select-auto layer-components:border-none layer-components:px-0 layer-components:py-1.25 layer-components:text-md layer-components:font-inherit layer-components:bg-transparent', 'layer-components:md:min-w-120px', 'layer-components:placeholder:color-gray-dark', 'layer-components:focus:outline-none', 'layer-components:focus-visible:outline-none', 'layer-components:first:rounded-l-inherit layer-components:first:pl-md', 'layer-components:last:rounded-r-inherit layer-components:last:pr-md');
|
|
26
27
|
const inputBorderClassName = (0, clsx_1.default)('layer-components:flex layer-components:flex-row layer-components:items-center layer-components:gap-xs layer-components:border-1 layer-components:rounded-lg layer-components:border-solid layer-components:text-md layer-components:shadow-sm layer-components:shadow-inset layer-components:transition-shadow layer-components:color-black layer-components:bg-white layer-components:border-gray-dark', 'layer-components:w-max-content layer-components:overflow-clip', 'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:shadow-none layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:bg-transparent layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:border-gray layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:placeholder-gray-dark', 'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:outline-none layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring-4 layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring-accent', 'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:outline-none layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring-4 layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:bg-lighten-3 layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring-main-light', 'layer-components:[&:has(input:hover),&:has(textarea:hover)]:border-black', 'layer-components:[&>.icon]:mx-sm');
|
|
27
|
-
|
|
28
|
+
function InputBorderImpl(props) {
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(GroupScale_js_1.GroupScaleReset, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props)) }));
|
|
30
|
+
}
|
|
31
|
+
const InputBorder = (0, hooks_js_1.withClassName)(InputBorderImpl, inputBorderClassName);
|
|
28
32
|
const InnerInput = function InnerInput(_a) {
|
|
29
33
|
var { autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs = 5000, onValueChange } = _a, props = __rest(_a, ["autoSelect", "onFocus", "onBlur", "className", "placeholders", "placeholder", "placeholdersIntervalMs", "onValueChange"]);
|
|
30
34
|
const handleFocus = (ev) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,gDAG8B;AAC9B,gDAAwB;AAExB,6CAA+C;AAC/C,yFAAmF;AACnF,uDAAoD;AAEvC,QAAA,cAAc,GAAG,IAAA,cAAI,EACjC,+GAA+G,EAC/G,mCAAmC,EACnC,gDAAgD,EAChD,uCAAuC,EACvC,+CAA+C,EAC/C,kDAAkD,EAClD,iDAAiD,CACjD,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAA,cAAI,EAChC,8KAA8K,EAC9K,gDAAgD,EAChD,kIAAkI,EAClI,oHAAoH,EACpH,2JAA2J,EAC3J,4EAA4E,EAC5E,oCAAoC,CACpC,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,wBAAa,EAAC,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,gDAG8B;AAC9B,gDAAwB;AAExB,6CAA+C;AAC/C,yFAAmF;AACnF,+DAA8D;AAC9D,uDAAoD;AAEvC,QAAA,cAAc,GAAG,IAAA,cAAI,EACjC,+GAA+G,EAC/G,mCAAmC,EACnC,gDAAgD,EAChD,uCAAuC,EACvC,+CAA+C,EAC/C,kDAAkD,EAClD,iDAAiD,CACjD,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAA,cAAI,EAChC,8KAA8K,EAC9K,gDAAgD,EAChD,kIAAkI,EAClI,oHAAoH,EACpH,2JAA2J,EAC3J,4EAA4E,EAC5E,oCAAoC,CACpC,CAAC;AAEF,SAAS,eAAe,CACvB,KAEC;IAED,OAAO,CACN,uBAAC,+BAAe,cACf,gDAAS,KAAK,EAAI,GACD,CAClB,CAAC;AACH,CAAC;AACD,MAAM,WAAW,GAAG,IAAA,wBAAa,EAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;AAEzE,MAAM,UAAU,GAAG,SAAS,UAAU,CAAC,EAW1B;QAX0B,EACtC,UAAU,EACV,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,WAAW,EACX,sBAAsB,GAAG,IAAI,EAC7B,aAAa,OAGD,EADT,KAAK,cAV8B,0HAWtC,CADQ;IAER,MAAM,WAAW,GAA8B,CAAC,EAAE,EAAE,EAAE;QACrD,IAAI,UAAU,EAAE,CAAC;YAChB,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACpB,CAAC;QACD,IACC,qBAAS,CAAC,eAAe;YACzB,IAAI,CAAC,GAAG,EAAE,GAAG,qBAAS,CAAC,eAAe,GAAG,GAAG,EAC3C,CAAC;YACF,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IACF,MAAM,UAAU,GAA6B,CAAC,EAAE,EAAE,EAAE;QACnD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;QACb,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,IAAA,sDAAwB,EACjD,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAClB,sBAAsB,CACtB,CAAC;IAEF,OAAO,CACN,uBAAC,aAAS,kBACT,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,iBAAiB,EAC7C,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAc,EAAE,SAAS,CAAC,IACtC,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC;AAcF,MAAM,YAAY,GAAG,SAAS,YAAY,CAAC,EAM9B;QAN8B,EAC1C,SAAS,EACT,SAAS,EACT,cAAc,EACd,YAAY,OAEA,EADT,KAAK,cALkC,4DAM1C,CADQ;IAER,OAAO,CACN,wBAAC,WAAW,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,aAC/C,cAAc,EACf,uBAAC,UAAU,oBAAK,KAAK,EAAI,EACxB,YAAY,IACA,CACd,CAAC;AACH,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAChD,MAAM,EAAE,WAAW;IACnB,KAAK,EAAE,UAAU;CACjB,CAAC,CAAC"}
|
|
@@ -3,7 +3,9 @@ import { Input } from './Input.js';
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: (({ className, borderRef, startAccessory, endAccessory, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
6
|
-
Border: import("react").FunctionComponent<import("react").
|
|
6
|
+
Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
7
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
8
|
+
}>;
|
|
7
9
|
Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
8
10
|
};
|
|
9
11
|
argTypes: {
|
|
@@ -12,7 +12,9 @@ declare function TextAreaInput({ ref, autoSize, padBottomPixels, onValueChange,
|
|
|
12
12
|
export declare const TextArea: (({ className, ...rest }: TextAreaProps & {
|
|
13
13
|
ref?: React.Ref<any>;
|
|
14
14
|
}) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
15
|
-
Border: import("react").FunctionComponent<import("react").
|
|
15
|
+
Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
16
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
17
|
+
}>;
|
|
16
18
|
Input: typeof TextAreaInput;
|
|
17
19
|
};
|
|
18
20
|
export {};
|
|
@@ -5,7 +5,9 @@ declare const meta: {
|
|
|
5
5
|
component: (({ className, ...rest }: import("./TextArea.js").TextAreaProps & {
|
|
6
6
|
ref?: React.Ref<any>;
|
|
7
7
|
}) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
8
|
-
Border: import("react").FunctionComponent<import("react").
|
|
8
|
+
Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
9
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
10
|
+
}>;
|
|
9
11
|
Input: ({ ref, autoSize, padBottomPixels, onValueChange, className, rows, ...rest }: import("./TextArea.js").TextAreaProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
10
12
|
};
|
|
11
13
|
argTypes: {};
|
|
@@ -13,6 +13,8 @@ export interface InputProps extends Omit<BaseInputProps, 'className'> {
|
|
|
13
13
|
ref?: Ref<HTMLInputElement>;
|
|
14
14
|
}
|
|
15
15
|
export declare const Input: (({ className, borderRef, startAccessory, endAccessory, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
16
|
-
Border: import("react").FunctionComponent<import("react").
|
|
16
|
+
Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
17
|
+
ref?: Ref<HTMLDivElement>;
|
|
18
|
+
}>;
|
|
17
19
|
Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
20
|
};
|
|
@@ -15,10 +15,14 @@ import { Input as BaseInput, } from '@base-ui/react/input';
|
|
|
15
15
|
import clsx from 'clsx';
|
|
16
16
|
import { withClassName } from '../../hooks.js';
|
|
17
17
|
import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
|
|
18
|
+
import { GroupScaleReset } from '../../systems/GroupScale.js';
|
|
18
19
|
import { inputInfo } from '../../systems/inputs.js';
|
|
19
20
|
export const inputClassName = clsx('layer-components:min-w-60px layer-components:flex-1 layer-components:select-auto layer-components:border-none layer-components:px-0 layer-components:py-1.25 layer-components:text-md layer-components:font-inherit layer-components:bg-transparent', 'layer-components:md:min-w-120px', 'layer-components:placeholder:color-gray-dark', 'layer-components:focus:outline-none', 'layer-components:focus-visible:outline-none', 'layer-components:first:rounded-l-inherit layer-components:first:pl-md', 'layer-components:last:rounded-r-inherit layer-components:last:pr-md');
|
|
20
21
|
const inputBorderClassName = clsx('layer-components:flex layer-components:flex-row layer-components:items-center layer-components:gap-xs layer-components:border-1 layer-components:rounded-lg layer-components:border-solid layer-components:text-md layer-components:shadow-sm layer-components:shadow-inset layer-components:transition-shadow layer-components:color-black layer-components:bg-white layer-components:border-gray-dark', 'layer-components:w-max-content layer-components:overflow-clip', 'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:shadow-none layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:bg-transparent layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:border-gray layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:placeholder-gray-dark', 'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:outline-none layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring-4 layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring-accent', 'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:outline-none layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring-4 layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:bg-lighten-3 layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring-main-light', 'layer-components:[&:has(input:hover),&:has(textarea:hover)]:border-black', 'layer-components:[&>.icon]:mx-sm');
|
|
21
|
-
|
|
22
|
+
function InputBorderImpl(props) {
|
|
23
|
+
return (_jsx(GroupScaleReset, { children: _jsx("div", Object.assign({}, props)) }));
|
|
24
|
+
}
|
|
25
|
+
const InputBorder = withClassName(InputBorderImpl, inputBorderClassName);
|
|
22
26
|
const InnerInput = function InnerInput(_a) {
|
|
23
27
|
var { autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs = 5000, onValueChange } = _a, props = __rest(_a, ["autoSelect", "onFocus", "onBlur", "className", "placeholders", "placeholder", "placeholdersIntervalMs", "onValueChange"]);
|
|
24
28
|
const handleFocus = (ev) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,KAAK,IAAI,SAAS,GAElB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CACjC,+GAA+G,EAC/G,mCAAmC,EACnC,gDAAgD,EAChD,uCAAuC,EACvC,+CAA+C,EAC/C,kDAAkD,EAClD,iDAAiD,CACjD,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAI,CAChC,8KAA8K,EAC9K,gDAAgD,EAChD,kIAAkI,EAClI,oHAAoH,EACpH,2JAA2J,EAC3J,4EAA4E,EAC5E,oCAAoC,CACpC,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAAC,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,9 @@ import { Input } from './Input.js';
|
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: (({ className, borderRef, startAccessory, endAccessory, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
6
|
-
Border: import("react").FunctionComponent<import("react").
|
|
6
|
+
Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
7
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
8
|
+
}>;
|
|
7
9
|
Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
10
|
};
|
|
9
11
|
argTypes: {
|
|
@@ -12,7 +12,9 @@ declare function TextAreaInput({ ref, autoSize, padBottomPixels, onValueChange,
|
|
|
12
12
|
export declare const TextArea: (({ className, ...rest }: TextAreaProps & {
|
|
13
13
|
ref?: React.Ref<any>;
|
|
14
14
|
}) => import("react/jsx-runtime").JSX.Element) & {
|
|
15
|
-
Border: import("react").FunctionComponent<import("react").
|
|
15
|
+
Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
16
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
17
|
+
}>;
|
|
16
18
|
Input: typeof TextAreaInput;
|
|
17
19
|
};
|
|
18
20
|
export {};
|
|
@@ -5,7 +5,9 @@ declare const meta: {
|
|
|
5
5
|
component: (({ className, ...rest }: import("./TextArea.js").TextAreaProps & {
|
|
6
6
|
ref?: React.Ref<any>;
|
|
7
7
|
}) => import("react/jsx-runtime").JSX.Element) & {
|
|
8
|
-
Border: import("react").FunctionComponent<import("react").
|
|
8
|
+
Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
9
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
10
|
+
}>;
|
|
9
11
|
Input: ({ ref, autoSize, padBottomPixels, onValueChange, className, rows, ...rest }: import("./TextArea.js").TextAreaProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
12
|
};
|
|
11
13
|
argTypes: {};
|
package/package.json
CHANGED
|
@@ -6,6 +6,7 @@ import clsx from 'clsx';
|
|
|
6
6
|
import { Ref } from 'react';
|
|
7
7
|
import { withClassName } from '../../hooks.js';
|
|
8
8
|
import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
|
|
9
|
+
import { GroupScaleReset } from '../../systems/GroupScale.js';
|
|
9
10
|
import { inputInfo } from '../../systems/inputs.js';
|
|
10
11
|
|
|
11
12
|
export const inputClassName = clsx(
|
|
@@ -28,7 +29,18 @@ const inputBorderClassName = clsx(
|
|
|
28
29
|
'layer-components:[&>.icon]:(mx-sm)',
|
|
29
30
|
);
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
function InputBorderImpl(
|
|
33
|
+
props: React.HTMLAttributes<HTMLDivElement> & {
|
|
34
|
+
ref?: Ref<HTMLDivElement>;
|
|
35
|
+
},
|
|
36
|
+
) {
|
|
37
|
+
return (
|
|
38
|
+
<GroupScaleReset>
|
|
39
|
+
<div {...props} />
|
|
40
|
+
</GroupScaleReset>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
const InputBorder = withClassName(InputBorderImpl, inputBorderClassName);
|
|
32
44
|
|
|
33
45
|
const InnerInput = function InnerInput({
|
|
34
46
|
autoSelect,
|