@preply/ds-web-core 0.46.0 → 0.47.0
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/aria/index.d.ts +1 -0
- package/dist/aria/index.js +2 -0
- package/dist/aria/utils.d.ts +4 -0
- package/dist/aria/utils.js +22 -0
- package/dist/color/module-color/hooks/useColorClassNames.d.ts +1 -1
- package/dist/color/module-color/style/index.module.less.js +2 -2
- package/dist/events/hooks/useFocusEvents.d.ts +7 -0
- package/dist/events/hooks/useFocusEvents.js +27 -0
- package/dist/events/index.d.ts +2 -0
- package/dist/events/index.js +2 -0
- package/dist/events/types.d.ts +7 -0
- package/dist/events/types.js +2 -0
- package/dist/field/constants.d.ts +1 -0
- package/dist/field/constants.js +4 -0
- package/dist/field/hooks/useTextField.d.ts +8 -0
- package/dist/field/hooks/useTextField.js +66 -0
- package/dist/field/index.d.ts +3 -0
- package/dist/field/index.js +3 -0
- package/dist/field/types.d.ts +55 -0
- package/dist/field/types.js +2 -0
- package/dist/focus/style/mixins.less +8 -0
- package/dist/focus/style/mixins.less.js +8 -0
- package/dist/generated/breakpoints.less +1 -1
- package/dist/generated/options.less +5 -5
- package/dist/generated/tokens.less +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +8 -1
- package/dist/input/constants.d.ts +4 -0
- package/dist/input/constants.js +7 -0
- package/dist/input/index.d.ts +4 -0
- package/dist/input/index.js +4 -0
- package/dist/input/options.d.ts +7 -0
- package/dist/input/options.js +40 -0
- package/dist/input/types.d.ts +106 -0
- package/dist/input/types.js +2 -0
- package/dist/input/util.d.ts +2 -0
- package/dist/input/util.js +11 -0
- package/dist/typography/style/mixins.less +10 -6
- package/package.json +6 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getAriaProps } from './utils';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { InputCommonProps } from '../input';
|
|
3
|
+
export declare const makeDescId: (id: string) => string;
|
|
4
|
+
export declare const getAriaProps: ({ "aria-describedby": ariaDescribedBy, "aria-disabled": ariaDisabled, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, required, disabled, hasError, }: InputCommonProps) => Pick<import("react").HTMLAttributes<HTMLInputElement>, "aria-describedby" | "aria-disabled" | "aria-invalid" | "aria-required">;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
const SUFIX = '-desc';
|
|
2
|
+
const removeFalsyProperties = (props) => {
|
|
3
|
+
return Object.keys(props).reduce((acc, key) => {
|
|
4
|
+
if (props[key]) {
|
|
5
|
+
acc[key] = props[key];
|
|
6
|
+
}
|
|
7
|
+
return acc;
|
|
8
|
+
}, {});
|
|
9
|
+
};
|
|
10
|
+
const makeDescId = (id) => `${id}${SUFIX}`;
|
|
11
|
+
const getAriaProps = ({ 'aria-describedby': ariaDescribedBy, 'aria-disabled': ariaDisabled, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, required, disabled, hasError, }) => {
|
|
12
|
+
const props = {
|
|
13
|
+
'aria-describedby': ariaDescribedBy || '',
|
|
14
|
+
'aria-disabled': !!ariaDisabled || !!disabled,
|
|
15
|
+
'aria-invalid': !!ariaInvalid || !!hasError,
|
|
16
|
+
'aria-required': !!ariaRequired || !!required,
|
|
17
|
+
};
|
|
18
|
+
return removeFalsyProperties(props);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { getAriaProps, makeDescId };
|
|
22
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9hcmlhL3V0aWxzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQVJJQUlucHV0UHJvcHMsIEFSSUFJbnB1dFByb3BzTWFwLCBJbnB1dENvbW1vblByb3BzIH0gZnJvbSAnLi4vaW5wdXQnO1xuXG5jb25zdCBTVUZJWCA9ICctZGVzYyc7XG5cbmNvbnN0IHJlbW92ZUZhbHN5UHJvcGVydGllcyA9IChwcm9wczogQVJJQUlucHV0UHJvcHNNYXApOiBBUklBSW5wdXRQcm9wcyA9PiB7XG4gICAgcmV0dXJuIE9iamVjdC5rZXlzKHByb3BzKS5yZWR1Y2UoKGFjYywga2V5KSA9PiB7XG4gICAgICAgIGlmIChwcm9wc1trZXldKSB7XG4gICAgICAgICAgICBhY2Nba2V5XSA9IHByb3BzW2tleV07XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIGFjYztcbiAgICB9LCB7fSk7XG59O1xuXG5leHBvcnQgY29uc3QgbWFrZURlc2NJZCA9IChpZDogc3RyaW5nKTogc3RyaW5nID0+IGAke2lkfSR7U1VGSVh9YDtcblxuZXhwb3J0IGNvbnN0IGdldEFyaWFQcm9wcyA9ICh7XG4gICAgJ2FyaWEtZGVzY3JpYmVkYnknOiBhcmlhRGVzY3JpYmVkQnksXG4gICAgJ2FyaWEtZGlzYWJsZWQnOiBhcmlhRGlzYWJsZWQsXG4gICAgJ2FyaWEtaW52YWxpZCc6IGFyaWFJbnZhbGlkLFxuICAgICdhcmlhLXJlcXVpcmVkJzogYXJpYVJlcXVpcmVkLFxuICAgIHJlcXVpcmVkLFxuICAgIGRpc2FibGVkLFxuICAgIGhhc0Vycm9yLFxufTogSW5wdXRDb21tb25Qcm9wcyk6IEFSSUFJbnB1dFByb3BzID0+IHtcbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgICAgJ2FyaWEtZGVzY3JpYmVkYnknOiBhcmlhRGVzY3JpYmVkQnkgfHwgJycsXG4gICAgICAgICdhcmlhLWRpc2FibGVkJzogISFhcmlhRGlzYWJsZWQgfHwgISFkaXNhYmxlZCxcbiAgICAgICAgJ2FyaWEtaW52YWxpZCc6ICEhYXJpYUludmFsaWQgfHwgISFoYXNFcnJvcixcbiAgICAgICAgJ2FyaWEtcmVxdWlyZWQnOiAhIWFyaWFSZXF1aXJlZCB8fCAhIXJlcXVpcmVkLFxuICAgIH07XG5cbiAgICByZXR1cm4gcmVtb3ZlRmFsc3lQcm9wZXJ0aWVzKHByb3BzKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxLQUFLLEdBQUcsT0FBTyxDQUFDO0FBRXRCLE1BQU0scUJBQXFCLEdBQUcsQ0FBQyxLQUF3QjtJQUNuRCxPQUFPLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLEdBQUc7UUFDdEMsSUFBSSxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDWixHQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQ3pCO1FBQ0QsT0FBTyxHQUFHLENBQUM7S0FDZCxFQUFFLEVBQUUsQ0FBQyxDQUFDO0FBQ1gsQ0FBQyxDQUFDO01BRVcsVUFBVSxHQUFHLENBQUMsRUFBVSxLQUFhLEdBQUcsRUFBRSxHQUFHLEtBQUssR0FBRztNQUVyRCxZQUFZLEdBQUcsQ0FBQyxFQUN6QixrQkFBa0IsRUFBRSxlQUFlLEVBQ25DLGVBQWUsRUFBRSxZQUFZLEVBQzdCLGNBQWMsRUFBRSxXQUFXLEVBQzNCLGVBQWUsRUFBRSxZQUFZLEVBQzdCLFFBQVEsRUFDUixRQUFRLEVBQ1IsUUFBUSxHQUNPO0lBQ2YsTUFBTSxLQUFLLEdBQUc7UUFDVixrQkFBa0IsRUFBRSxlQUFlLElBQUksRUFBRTtRQUN6QyxlQUFlLEVBQUUsQ0FBQyxDQUFDLFlBQVksSUFBSSxDQUFDLENBQUMsUUFBUTtRQUM3QyxjQUFjLEVBQUUsQ0FBQyxDQUFDLFdBQVcsSUFBSSxDQUFDLENBQUMsUUFBUTtRQUMzQyxlQUFlLEVBQUUsQ0FBQyxDQUFDLFlBQVksSUFBSSxDQUFDLENBQUMsUUFBUTtLQUNoRCxDQUFDO0lBRUYsT0FBTyxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztBQUN4Qzs7OzsifQ==
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const useColorClassNames: (color?: "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | undefined) => string[];
|
|
1
|
+
export declare const useColorClassNames: (color?: "white" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "magenta-100" | "magenta-200" | "magenta-300" | "magenta-400" | "magenta-500" | undefined) => string[];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "._1vfDCY{color:var(--55407f)}._1o2DZF{color:var(--8f1238)}.q9fWe6{color:var(--da403c)}._1kfchs{color:var(--7c8c3c)}._3uaBxy{color:var(--c9575b)}.eDvRT_{color:var(--2fb6f7)}._3Ifh5r{color:var(--54ed1d)}._3LVNko{color:var(--b706bf)}._2VdjaD{color:var(--4adefb)}.yh0c33{color:var(--de8a40)}.Aq4AtN{color:var(--574543)}._3RuNeA{color:var(--1383a7)}._2bQCMl{color:var(--9f1066)}._3FBrRQ{color:var(--d4cf94)}._3NFMly{color:var(--bbfa9f)}._2YTgye{color:var(--5f8b30)}._31OOeZ{color:var(--c7d8be)}._3Pou89{color:var(--17bab8)}._2nKF5_{color:var(--f017e5)}.-HvjkO{color:var(--2242ed)}._3Kg-jM{color:var(--e40de4)}._1AH5nF{color:var(--ecb5d5)}._1swZ2a{color:var(--5b5cb0)}.OKvn8i{color:var(--d55c71)}.zHIi6Q{color:var(--4e47fe)}._2eZwFa{color:var(--3e7877)}.uEusgR{color:var(--21906f)}._2CdJlo{color:var(--5d87f3)}._2EQ-Hn{color:var(--201e14)}._1p2EKt{color:var(--e1c27c)}._2zLkru{color:var(--6a1420)}._1UFSvM{color:var(--1a9963)}._1IatQi{color:var(--b774df)}._1U0k7H{color:var(--f72cdd)}.wW0RJ9{color:var(--6cbd80)}._1HVxJ3{color:var(--5893e7)}";
|
|
4
|
-
var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-core/src/color/module-color/style/index.module.less",__css:css_248z,"Color--color-gray-100":"_1vfDCY","Color--color-gray-200":"_1o2DZF","Color--color-gray-300":"q9fWe6","Color--color-gray-400":"_1kfchs","Color--color-gray-500":"_3uaBxy","Color--color-gray-600":"eDvRT_","Color--color-teal-100":"_3Ifh5r","Color--color-teal-200":"_3LVNko","Color--color-teal-300":"_2VdjaD","Color--color-teal-400":"yh0c33","Color--color-teal-500":"Aq4AtN","Color--color-green-100":"_3RuNeA","Color--color-green-200":"_2bQCMl","Color--color-green-300":"_3FBrRQ","Color--color-green-400":"_3NFMly","Color--color-green-500":"_2YTgye","Color--color-yellow-100":"_31OOeZ","Color--color-yellow-200":"_3Pou89","Color--color-yellow-300":"_2nKF5_","Color--color-yellow-400":"-HvjkO","Color--color-yellow-500":"_3Kg-jM","Color--color-red-100":"_1AH5nF","Color--color-red-200":"_1swZ2a","Color--color-red-300":"OKvn8i","Color--color-red-400":"zHIi6Q","Color--color-red-500":"_2eZwFa","Color--color-blue-100":"uEusgR","Color--color-blue-200":"_2CdJlo","Color--color-blue-300":"_2EQ-Hn","Color--color-blue-400":"_1p2EKt","Color--color-blue-500":"_2zLkru","Color--color-magenta-100":"_1UFSvM","Color--color-magenta-200":"_1IatQi","Color--color-magenta-300":"_1U0k7H","Color--color-magenta-400":"wW0RJ9","Color--color-magenta-500":"_1HVxJ3"};
|
|
3
|
+
var css_248z = "._1oG1KT{color:var(--145676)}._1vfDCY{color:var(--55407f)}._1o2DZF{color:var(--8f1238)}.q9fWe6{color:var(--da403c)}._1kfchs{color:var(--7c8c3c)}._3uaBxy{color:var(--c9575b)}.eDvRT_{color:var(--2fb6f7)}._3Ifh5r{color:var(--54ed1d)}._3LVNko{color:var(--b706bf)}._2VdjaD{color:var(--4adefb)}.yh0c33{color:var(--de8a40)}.Aq4AtN{color:var(--574543)}._3RuNeA{color:var(--1383a7)}._2bQCMl{color:var(--9f1066)}._3FBrRQ{color:var(--d4cf94)}._3NFMly{color:var(--bbfa9f)}._2YTgye{color:var(--5f8b30)}._31OOeZ{color:var(--c7d8be)}._3Pou89{color:var(--17bab8)}._2nKF5_{color:var(--f017e5)}.-HvjkO{color:var(--2242ed)}._3Kg-jM{color:var(--e40de4)}._1AH5nF{color:var(--ecb5d5)}._1swZ2a{color:var(--5b5cb0)}.OKvn8i{color:var(--d55c71)}.zHIi6Q{color:var(--4e47fe)}._2eZwFa{color:var(--3e7877)}.uEusgR{color:var(--21906f)}._2CdJlo{color:var(--5d87f3)}._2EQ-Hn{color:var(--201e14)}._1p2EKt{color:var(--e1c27c)}._2zLkru{color:var(--6a1420)}._1UFSvM{color:var(--1a9963)}._1IatQi{color:var(--b774df)}._1U0k7H{color:var(--f72cdd)}.wW0RJ9{color:var(--6cbd80)}._1HVxJ3{color:var(--5893e7)}";
|
|
4
|
+
var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-core/src/color/module-color/style/index.module.less",__css:css_248z,"Color--color-white":"_1oG1KT","Color--color-gray-100":"_1vfDCY","Color--color-gray-200":"_1o2DZF","Color--color-gray-300":"q9fWe6","Color--color-gray-400":"_1kfchs","Color--color-gray-500":"_3uaBxy","Color--color-gray-600":"eDvRT_","Color--color-teal-100":"_3Ifh5r","Color--color-teal-200":"_3LVNko","Color--color-teal-300":"_2VdjaD","Color--color-teal-400":"yh0c33","Color--color-teal-500":"Aq4AtN","Color--color-green-100":"_3RuNeA","Color--color-green-200":"_2bQCMl","Color--color-green-300":"_3FBrRQ","Color--color-green-400":"_3NFMly","Color--color-green-500":"_2YTgye","Color--color-yellow-100":"_31OOeZ","Color--color-yellow-200":"_3Pou89","Color--color-yellow-300":"_2nKF5_","Color--color-yellow-400":"-HvjkO","Color--color-yellow-500":"_3Kg-jM","Color--color-red-100":"_1AH5nF","Color--color-red-200":"_1swZ2a","Color--color-red-300":"OKvn8i","Color--color-red-400":"zHIi6Q","Color--color-red-500":"_2eZwFa","Color--color-blue-100":"uEusgR","Color--color-blue-200":"_2CdJlo","Color--color-blue-300":"_2EQ-Hn","Color--color-blue-400":"_1p2EKt","Color--color-blue-500":"_2zLkru","Color--color-magenta-100":"_1UFSvM","Color--color-magenta-200":"_1IatQi","Color--color-magenta-300":"_1U0k7H","Color--color-magenta-400":"wW0RJ9","Color--color-magenta-500":"_1HVxJ3"};
|
|
5
5
|
var stylesheet=css_248z;
|
|
6
6
|
styleInject(css_248z);
|
|
7
7
|
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FocusEventHandlers } from '..';
|
|
2
|
+
declare type FocusOptions = FocusEventHandlers & {
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
captureChildEvents: boolean;
|
|
5
|
+
};
|
|
6
|
+
export declare const useFocusEvents: ({ disabled, captureChildEvents, onFocus, onBlur, }: FocusOptions) => FocusEventHandlers;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
|
|
3
|
+
const makeEventHandler = (onFocus, captureChildEvents) => {
|
|
4
|
+
if (!onFocus) {
|
|
5
|
+
return undefined;
|
|
6
|
+
}
|
|
7
|
+
return (event) => {
|
|
8
|
+
if (!captureChildEvents && event.target !== event.currentTarget) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
onFocus(event);
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
const useFocusEvents = ({ disabled, captureChildEvents, onFocus, onBlur, }) => {
|
|
15
|
+
return useMemo(() => {
|
|
16
|
+
if (disabled) {
|
|
17
|
+
return {};
|
|
18
|
+
}
|
|
19
|
+
return {
|
|
20
|
+
onFocus: makeEventHandler(onFocus, captureChildEvents),
|
|
21
|
+
onBlur: makeEventHandler(onBlur, captureChildEvents),
|
|
22
|
+
};
|
|
23
|
+
}, [disabled, captureChildEvents, onFocus, onBlur]);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export { useFocusEvents };
|
|
27
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlRm9jdXNFdmVudHMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ldmVudHMvaG9va3MvdXNlRm9jdXNFdmVudHMudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRm9jdXNFdmVudCwgRm9jdXNFdmVudEhhbmRsZXIsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEZvY3VzRXZlbnRIYW5kbGVycyB9IGZyb20gJy4uJztcblxudHlwZSBGb2N1c09wdGlvbnMgPSBGb2N1c0V2ZW50SGFuZGxlcnMgJiB7XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICAgIGNhcHR1cmVDaGlsZEV2ZW50czogYm9vbGVhbjtcbn07XG5cbmNvbnN0IG1ha2VFdmVudEhhbmRsZXIgPSAoXG4gICAgb25Gb2N1czogRm9jdXNFdmVudEhhbmRsZXIgfCB1bmRlZmluZWQsXG4gICAgY2FwdHVyZUNoaWxkRXZlbnRzOiBib29sZWFuLFxuKTogRm9jdXNFdmVudEhhbmRsZXIgfCB1bmRlZmluZWQgPT4ge1xuICAgIGlmICghb25Gb2N1cykge1xuICAgICAgICByZXR1cm4gdW5kZWZpbmVkO1xuICAgIH1cbiAgICByZXR1cm4gKGV2ZW50OiBGb2N1c0V2ZW50KSA9PiB7XG4gICAgICAgIGlmICghY2FwdHVyZUNoaWxkRXZlbnRzICYmIGV2ZW50LnRhcmdldCAhPT0gZXZlbnQuY3VycmVudFRhcmdldCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG4gICAgICAgIG9uRm9jdXMoZXZlbnQpO1xuICAgIH07XG59O1xuXG5leHBvcnQgY29uc3QgdXNlRm9jdXNFdmVudHMgPSAoe1xuICAgIGRpc2FibGVkLFxuICAgIGNhcHR1cmVDaGlsZEV2ZW50cyxcbiAgICBvbkZvY3VzLFxuICAgIG9uQmx1cixcbn06IEZvY3VzT3B0aW9ucyk6IEZvY3VzRXZlbnRIYW5kbGVycyA9PiB7XG4gICAgcmV0dXJuIHVzZU1lbW8oKCkgPT4ge1xuICAgICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgICAgIHJldHVybiB7fTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgb25Gb2N1czogbWFrZUV2ZW50SGFuZGxlcihvbkZvY3VzLCBjYXB0dXJlQ2hpbGRFdmVudHMpLFxuICAgICAgICAgICAgb25CbHVyOiBtYWtlRXZlbnRIYW5kbGVyKG9uQmx1ciwgY2FwdHVyZUNoaWxkRXZlbnRzKSxcbiAgICAgICAgfTtcbiAgICB9LCBbZGlzYWJsZWQsIGNhcHR1cmVDaGlsZEV2ZW50cywgb25Gb2N1cywgb25CbHVyXSk7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBU0EsTUFBTSxnQkFBZ0IsR0FBRyxDQUNyQixPQUFzQyxFQUN0QyxrQkFBMkI7SUFFM0IsSUFBSSxDQUFDLE9BQU8sRUFBRTtRQUNWLE9BQU8sU0FBUyxDQUFDO0tBQ3BCO0lBQ0QsT0FBTyxDQUFDLEtBQWlCO1FBQ3JCLElBQUksQ0FBQyxrQkFBa0IsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLEtBQUssQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTztTQUNWO1FBQ0QsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0tBQ2xCLENBQUM7QUFDTixDQUFDLENBQUM7TUFFVyxjQUFjLEdBQUcsQ0FBQyxFQUMzQixRQUFRLEVBQ1Isa0JBQWtCLEVBQ2xCLE9BQU8sRUFDUCxNQUFNLEdBQ0s7SUFDWCxPQUFPLE9BQU8sQ0FBQztRQUNYLElBQUksUUFBUSxFQUFFO1lBQ1YsT0FBTyxFQUFFLENBQUM7U0FDYjtRQUNELE9BQU87WUFDSCxPQUFPLEVBQUUsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLGtCQUFrQixDQUFDO1lBQ3RELE1BQU0sRUFBRSxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsa0JBQWtCLENBQUM7U0FDdkQsQ0FBQztLQUNMLEVBQUUsQ0FBQyxRQUFRLEVBQUUsa0JBQWtCLEVBQUUsT0FBTyxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUM7QUFDeEQ7Ozs7In0=
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FocusEvent } from 'react';
|
|
2
|
+
export declare type FocusEventHandler = (event: FocusEvent) => void;
|
|
3
|
+
export declare type ValueChangeEventHandler<T> = (value: T) => void;
|
|
4
|
+
export interface FocusEventHandlers {
|
|
5
|
+
onFocus?: FocusEventHandler;
|
|
6
|
+
onBlur?: FocusEventHandler;
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const FIELD_TYPE_DEFAULT = "text";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
const FIELD_TYPE_DEFAULT = 'text';
|
|
2
|
+
|
|
3
|
+
export { FIELD_TYPE_DEFAULT };
|
|
4
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlcyI6WyIuLi8uLi9zcmMvZmllbGQvY29uc3RhbnRzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCBGSUVMRF9UWVBFX0RFRkFVTFQgPSAndGV4dCc7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ik1BQWEsa0JBQWtCLEdBQUc7Ozs7In0=
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { SimpleTextInputTypeProps } from '../../input';
|
|
2
|
+
import { SingleLineFieldLayoutProps, TextFieldProps } from '../types';
|
|
3
|
+
declare type UseTextFieldState = {
|
|
4
|
+
fieldProps: Omit<SingleLineFieldLayoutProps, 'input' | 'className'>;
|
|
5
|
+
inputProps: SimpleTextInputTypeProps;
|
|
6
|
+
};
|
|
7
|
+
export declare const useTextField: (props: TextFieldProps & Pick<SimpleTextInputTypeProps, "type" | "required" | "disabled" | "hasError" | "dataset" | "aria-describedby" | "aria-disabled" | "aria-invalid" | "aria-required" | "autoComplete" | "placeholder" | "maxLength" | "name" | "value" | "defaultValue" | "onChange" | "onFocus" | "onBlur" | "onClick" | "onKeyDown" | "onKeyUp">) => UseTextFieldState;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { makeTinyId } from '@preply/ds-core';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { makeDescId } from '../../aria/utils.js';
|
|
4
|
+
import { FIELD_TYPE_DEFAULT } from '../constants.js';
|
|
5
|
+
|
|
6
|
+
const useTextField = (props) => {
|
|
7
|
+
const { type, id, value, label, hideLabel, additionalText, preserveSpace, required, disabled, hasError, errorMessage, icon, button, onFocus, onBlur, onChange, dataset, ...rest } = props;
|
|
8
|
+
const actualId = id || makeTinyId();
|
|
9
|
+
const actualType = type !== null && type !== void 0 ? type : FIELD_TYPE_DEFAULT;
|
|
10
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
11
|
+
const [isTouched, setIsTouched] = useState(false);
|
|
12
|
+
const [isChanged, setIsChanged] = useState(false);
|
|
13
|
+
const handleFocus = ev => {
|
|
14
|
+
setIsFocused(true);
|
|
15
|
+
setIsTouched(true);
|
|
16
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
|
|
17
|
+
};
|
|
18
|
+
const handleBlur = ev => {
|
|
19
|
+
setIsFocused(false);
|
|
20
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
|
|
21
|
+
};
|
|
22
|
+
const handleChange = ev => {
|
|
23
|
+
setIsChanged(false);
|
|
24
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(ev);
|
|
25
|
+
};
|
|
26
|
+
const actualHasError = hasError || !!errorMessage;
|
|
27
|
+
const describeId = actualHasError || !!additionalText ? makeDescId(actualId) : undefined;
|
|
28
|
+
return {
|
|
29
|
+
fieldProps: {
|
|
30
|
+
id: actualId,
|
|
31
|
+
type: actualType,
|
|
32
|
+
label,
|
|
33
|
+
hideLabel,
|
|
34
|
+
additionalText,
|
|
35
|
+
required,
|
|
36
|
+
disabled,
|
|
37
|
+
isFocused,
|
|
38
|
+
isTouched,
|
|
39
|
+
isChanged,
|
|
40
|
+
hasValue: typeof value !== undefined,
|
|
41
|
+
hasError: actualHasError,
|
|
42
|
+
errorMessage,
|
|
43
|
+
preserveSpace,
|
|
44
|
+
icon,
|
|
45
|
+
button,
|
|
46
|
+
dataset,
|
|
47
|
+
},
|
|
48
|
+
inputProps: {
|
|
49
|
+
type: actualType,
|
|
50
|
+
id: actualId,
|
|
51
|
+
value,
|
|
52
|
+
// assitiveText: hideVisualLabel ?? label : undefined,
|
|
53
|
+
onChange: handleChange,
|
|
54
|
+
onFocus: handleFocus,
|
|
55
|
+
onBlur: handleBlur,
|
|
56
|
+
required,
|
|
57
|
+
disabled,
|
|
58
|
+
hasError: actualHasError,
|
|
59
|
+
'aria-describedby': describeId,
|
|
60
|
+
...rest,
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export { useTextField };
|
|
66
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGV4dEZpZWxkLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZmllbGQvaG9va3MvdXNlVGV4dEZpZWxkLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1ha2VUaW55SWQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHsgQ2hhbmdlRXZlbnRIYW5kbGVyLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgbWFrZURlc2NJZCB9IGZyb20gJy4uLy4uL2FyaWEvdXRpbHMnO1xuaW1wb3J0IHsgRm9jdXNFdmVudEhhbmRsZXIgfSBmcm9tICcuLi8uLi9ldmVudHMnO1xuaW1wb3J0IHsgU2ltcGxlVGV4dElucHV0VHlwZVByb3BzIH0gZnJvbSAnLi4vLi4vaW5wdXQnO1xuaW1wb3J0IHsgRklFTERfVFlQRV9ERUZBVUxUIH0gZnJvbSAnLi4vY29uc3RhbnRzJztcbmltcG9ydCB7IFNpbmdsZUxpbmVGaWVsZExheW91dFByb3BzLCBUZXh0RmllbGRQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxudHlwZSBVc2VUZXh0RmllbGRTdGF0ZSA9IHtcbiAgICBmaWVsZFByb3BzOiBPbWl0PFNpbmdsZUxpbmVGaWVsZExheW91dFByb3BzLCAnaW5wdXQnIHwgJ2NsYXNzTmFtZSc+O1xuICAgIGlucHV0UHJvcHM6IFNpbXBsZVRleHRJbnB1dFR5cGVQcm9wcztcbn07XG5cbmV4cG9ydCBjb25zdCB1c2VUZXh0RmllbGQgPSAoXG4gICAgcHJvcHM6IFRleHRGaWVsZFByb3BzICYgT21pdDxTaW1wbGVUZXh0SW5wdXRUeXBlUHJvcHMsICdpZCc+LFxuKTogVXNlVGV4dEZpZWxkU3RhdGUgPT4ge1xuICAgIGNvbnN0IHtcbiAgICAgICAgdHlwZSxcbiAgICAgICAgaWQsXG4gICAgICAgIHZhbHVlLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaGlkZUxhYmVsLFxuICAgICAgICBhZGRpdGlvbmFsVGV4dCxcbiAgICAgICAgcHJlc2VydmVTcGFjZSxcbiAgICAgICAgcmVxdWlyZWQsXG4gICAgICAgIGRpc2FibGVkLFxuICAgICAgICBoYXNFcnJvcixcbiAgICAgICAgZXJyb3JNZXNzYWdlLFxuICAgICAgICBpY29uLFxuICAgICAgICBidXR0b24sXG4gICAgICAgIG9uRm9jdXMsXG4gICAgICAgIG9uQmx1cixcbiAgICAgICAgb25DaGFuZ2UsXG4gICAgICAgIGRhdGFzZXQsXG4gICAgICAgIC4uLnJlc3RcbiAgICB9ID0gcHJvcHM7XG5cbiAgICBjb25zdCBhY3R1YWxJZCA9IGlkIHx8IG1ha2VUaW55SWQoKTtcbiAgICBjb25zdCBhY3R1YWxUeXBlID0gdHlwZSA/PyBGSUVMRF9UWVBFX0RFRkFVTFQ7XG5cbiAgICBjb25zdCBbaXNGb2N1c2VkLCBzZXRJc0ZvY3VzZWRdID0gdXNlU3RhdGU8Ym9vbGVhbj4oZmFsc2UpO1xuICAgIGNvbnN0IFtpc1RvdWNoZWQsIHNldElzVG91Y2hlZF0gPSB1c2VTdGF0ZTxib29sZWFuPihmYWxzZSk7XG4gICAgY29uc3QgW2lzQ2hhbmdlZCwgc2V0SXNDaGFuZ2VkXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcblxuICAgIGNvbnN0IGhhbmRsZUZvY3VzOiBGb2N1c0V2ZW50SGFuZGxlciA9IGV2ID0+IHtcbiAgICAgICAgc2V0SXNGb2N1c2VkKHRydWUpO1xuICAgICAgICBzZXRJc1RvdWNoZWQodHJ1ZSk7XG4gICAgICAgIG9uRm9jdXM/Lihldik7XG4gICAgfTtcblxuICAgIGNvbnN0IGhhbmRsZUJsdXI6IEZvY3VzRXZlbnRIYW5kbGVyID0gZXYgPT4ge1xuICAgICAgICBzZXRJc0ZvY3VzZWQoZmFsc2UpO1xuICAgICAgICBvbkJsdXI/Lihldik7XG4gICAgfTtcblxuICAgIGNvbnN0IGhhbmRsZUNoYW5nZTogQ2hhbmdlRXZlbnRIYW5kbGVyID0gZXYgPT4ge1xuICAgICAgICBzZXRJc0NoYW5nZWQoZmFsc2UpO1xuICAgICAgICBvbkNoYW5nZT8uKGV2KTtcbiAgICB9O1xuXG4gICAgY29uc3QgYWN0dWFsSGFzRXJyb3IgPSBoYXNFcnJvciB8fCAhIWVycm9yTWVzc2FnZTtcbiAgICBjb25zdCBkZXNjcmliZUlkID0gYWN0dWFsSGFzRXJyb3IgfHwgISFhZGRpdGlvbmFsVGV4dCA/IG1ha2VEZXNjSWQoYWN0dWFsSWQpIDogdW5kZWZpbmVkO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgICAgZmllbGRQcm9wczoge1xuICAgICAgICAgICAgaWQ6IGFjdHVhbElkLFxuICAgICAgICAgICAgdHlwZTogYWN0dWFsVHlwZSxcbiAgICAgICAgICAgIGxhYmVsLFxuICAgICAgICAgICAgaGlkZUxhYmVsLFxuICAgICAgICAgICAgYWRkaXRpb25hbFRleHQsXG4gICAgICAgICAgICByZXF1aXJlZCxcbiAgICAgICAgICAgIGRpc2FibGVkLFxuICAgICAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICAgICAgaXNUb3VjaGVkLFxuICAgICAgICAgICAgaXNDaGFuZ2VkLFxuICAgICAgICAgICAgaGFzVmFsdWU6IHR5cGVvZiB2YWx1ZSAhPT0gdW5kZWZpbmVkLFxuICAgICAgICAgICAgaGFzRXJyb3I6IGFjdHVhbEhhc0Vycm9yLFxuICAgICAgICAgICAgZXJyb3JNZXNzYWdlLFxuICAgICAgICAgICAgcHJlc2VydmVTcGFjZSxcbiAgICAgICAgICAgIGljb24sXG4gICAgICAgICAgICBidXR0b24sXG4gICAgICAgICAgICBkYXRhc2V0LFxuICAgICAgICB9LFxuICAgICAgICBpbnB1dFByb3BzOiB7XG4gICAgICAgICAgICB0eXBlOiBhY3R1YWxUeXBlLFxuICAgICAgICAgICAgaWQ6IGFjdHVhbElkLFxuICAgICAgICAgICAgdmFsdWUsXG4gICAgICAgICAgICAvLyBhc3NpdGl2ZVRleHQ6IGhpZGVWaXN1YWxMYWJlbCA/PyBsYWJlbCA6IHVuZGVmaW5lZCxcbiAgICAgICAgICAgIG9uQ2hhbmdlOiBoYW5kbGVDaGFuZ2UsXG4gICAgICAgICAgICBvbkZvY3VzOiBoYW5kbGVGb2N1cyxcbiAgICAgICAgICAgIG9uQmx1cjogaGFuZGxlQmx1cixcbiAgICAgICAgICAgIHJlcXVpcmVkLFxuICAgICAgICAgICAgZGlzYWJsZWQsXG4gICAgICAgICAgICBoYXNFcnJvcjogYWN0dWFsSGFzRXJyb3IsXG4gICAgICAgICAgICAnYXJpYS1kZXNjcmliZWRieSc6IGRlc2NyaWJlSWQsXG4gICAgICAgICAgICAuLi5yZXN0LFxuICAgICAgICB9LFxuICAgIH07XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O01BY2EsWUFBWSxHQUFHLENBQ3hCLEtBQTREO0lBRTVELE1BQU0sRUFDRixJQUFJLEVBQ0osRUFBRSxFQUNGLEtBQUssRUFDTCxLQUFLLEVBQ0wsU0FBUyxFQUNULGNBQWMsRUFDZCxhQUFhLEVBQ2IsUUFBUSxFQUNSLFFBQVEsRUFDUixRQUFRLEVBQ1IsWUFBWSxFQUNaLElBQUksRUFDSixNQUFNLEVBQ04sT0FBTyxFQUNQLE1BQU0sRUFDTixRQUFRLEVBQ1IsT0FBTyxFQUNQLEdBQUcsSUFBSSxFQUNWLEdBQUcsS0FBSyxDQUFDO0lBRVYsTUFBTSxRQUFRLEdBQUcsRUFBRSxJQUFJLFVBQVUsRUFBRSxDQUFDO0lBQ3BDLE1BQU0sVUFBVSxHQUFHLElBQUksYUFBSixJQUFJLGNBQUosSUFBSSxHQUFJLGtCQUFrQixDQUFDO0lBRTlDLE1BQU0sQ0FBQyxTQUFTLEVBQUUsWUFBWSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNELE1BQU0sQ0FBQyxTQUFTLEVBQUUsWUFBWSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNELE1BQU0sQ0FBQyxTQUFTLEVBQUUsWUFBWSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBRTNELE1BQU0sV0FBVyxHQUFzQixFQUFFO1FBQ3JDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuQixZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkIsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLEVBQUUsRUFBRTtLQUNqQixDQUFDO0lBRUYsTUFBTSxVQUFVLEdBQXNCLEVBQUU7UUFDcEMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3BCLE1BQU0sYUFBTixNQUFNLHVCQUFOLE1BQU0sQ0FBRyxFQUFFLEVBQUU7S0FDaEIsQ0FBQztJQUVGLE1BQU0sWUFBWSxHQUF1QixFQUFFO1FBQ3ZDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQixRQUFRLGFBQVIsUUFBUSx1QkFBUixRQUFRLENBQUcsRUFBRSxFQUFFO0tBQ2xCLENBQUM7SUFFRixNQUFNLGNBQWMsR0FBRyxRQUFRLElBQUksQ0FBQyxDQUFDLFlBQVksQ0FBQztJQUNsRCxNQUFNLFVBQVUsR0FBRyxjQUFjLElBQUksQ0FBQyxDQUFDLGNBQWMsR0FBRyxVQUFVLENBQUMsUUFBUSxDQUFDLEdBQUcsU0FBUyxDQUFDO0lBRXpGLE9BQU87UUFDSCxVQUFVLEVBQUU7WUFDUixFQUFFLEVBQUUsUUFBUTtZQUNaLElBQUksRUFBRSxVQUFVO1lBQ2hCLEtBQUs7WUFDTCxTQUFTO1lBQ1QsY0FBYztZQUNkLFFBQVE7WUFDUixRQUFRO1lBQ1IsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsUUFBUSxFQUFFLE9BQU8sS0FBSyxLQUFLLFNBQVM7WUFDcEMsUUFBUSxFQUFFLGNBQWM7WUFDeEIsWUFBWTtZQUNaLGFBQWE7WUFDYixJQUFJO1lBQ0osTUFBTTtZQUNOLE9BQU87U0FDVjtRQUNELFVBQVUsRUFBRTtZQUNSLElBQUksRUFBRSxVQUFVO1lBQ2hCLEVBQUUsRUFBRSxRQUFRO1lBQ1osS0FBSzs7WUFFTCxRQUFRLEVBQUUsWUFBWTtZQUN0QixPQUFPLEVBQUUsV0FBVztZQUNwQixNQUFNLEVBQUUsVUFBVTtZQUNsQixRQUFRO1lBQ1IsUUFBUTtZQUNSLFFBQVEsRUFBRSxjQUFjO1lBQ3hCLGtCQUFrQixFQUFFLFVBQVU7WUFDOUIsR0FBRyxJQUFJO1NBQ1Y7S0FDSixDQUFDO0FBQ047Ozs7In0=
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { FIELD_TYPE_DEFAULT } from './constants.js';
|
|
2
|
+
export { useTextField } from './hooks/useTextField.js';
|
|
3
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Dataset } from '@preply/ds-core';
|
|
2
|
+
import { MouseEventHandler, SVGAttributes } from 'react';
|
|
3
|
+
import { InputType, SimpleTextInputType, SingleLineInputType } from '../input';
|
|
4
|
+
export declare type FieldValue = string | number | boolean;
|
|
5
|
+
declare type ReactSVGComponentType = React.ComponentType<SVGAttributes<SVGElement>>;
|
|
6
|
+
export interface FieldButtonProps {
|
|
7
|
+
svg: ReactSVGComponentType;
|
|
8
|
+
assistiveText: string;
|
|
9
|
+
onClick: MouseEventHandler;
|
|
10
|
+
dataset?: Dataset;
|
|
11
|
+
}
|
|
12
|
+
export interface FieldLayoutProps {
|
|
13
|
+
id: string;
|
|
14
|
+
className: string;
|
|
15
|
+
label: string;
|
|
16
|
+
hideLabel?: boolean;
|
|
17
|
+
additionalText?: string;
|
|
18
|
+
preserveSpace?: boolean;
|
|
19
|
+
required?: boolean;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
isFocused: boolean;
|
|
22
|
+
isTouched: boolean;
|
|
23
|
+
isChanged: boolean;
|
|
24
|
+
hasValue: boolean;
|
|
25
|
+
hasError: boolean;
|
|
26
|
+
errorMessage?: string;
|
|
27
|
+
dataset?: Dataset;
|
|
28
|
+
}
|
|
29
|
+
export interface SingleLineFieldLayoutProps extends FieldLayoutProps {
|
|
30
|
+
input: React.ReactElement;
|
|
31
|
+
type: SingleLineInputType;
|
|
32
|
+
icon?: ReactSVGComponentType;
|
|
33
|
+
button?: React.ReactElement<FieldButtonProps>;
|
|
34
|
+
}
|
|
35
|
+
interface FieldCommonProps {
|
|
36
|
+
type?: InputType;
|
|
37
|
+
id?: string;
|
|
38
|
+
label: string;
|
|
39
|
+
hideLabel?: boolean;
|
|
40
|
+
additionalText?: string;
|
|
41
|
+
preserveSpace?: boolean;
|
|
42
|
+
hasError?: boolean;
|
|
43
|
+
errorMessage?: string;
|
|
44
|
+
dataset?: Dataset;
|
|
45
|
+
inputDataset?: Dataset;
|
|
46
|
+
}
|
|
47
|
+
interface SingleLineFieldCommonProps extends FieldCommonProps {
|
|
48
|
+
type?: SingleLineInputType;
|
|
49
|
+
icon?: ReactSVGComponentType;
|
|
50
|
+
button?: React.ReactElement<FieldButtonProps>;
|
|
51
|
+
}
|
|
52
|
+
export interface TextFieldProps extends SingleLineFieldCommonProps {
|
|
53
|
+
type?: SimpleTextInputType;
|
|
54
|
+
}
|
|
55
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from '../../external/style-inject/dist/style-inject.es.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "";
|
|
4
|
+
var stylesheet="";
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { css_248z as default, stylesheet };
|
|
8
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3QixxREFBeUQ7QUFDakY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyJ9
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
/* AUTO GENERATED @Thu
|
|
1
|
+
/* AUTO GENERATED @Thu Nov 10 2022 09:32:35 GMT+0000 (Coordinated Universal Time) */
|
|
2
2
|
|
|
3
3
|
@AVATAR_SIZE_OPTIONS: 2xs, xs, s, m, l, xl;
|
|
4
4
|
@BOX_PADDING_OPTIONS: none, 3xs, 2xs, xs, s, m, l, xl;
|
|
5
5
|
@BOX_RADIUS_OPTIONS: none, m, l;
|
|
6
6
|
@BUTTON_SIZE_OPTIONS: xs, s, m, l, xl;
|
|
7
7
|
@BUTTON_VARIANT_OPTIONS: primary, secondary, tertiary, quaternary, plain, dangerous;
|
|
8
|
-
@COLOR_NAME_OPTIONS: gray-100, gray-200, gray-300, gray-400, gray-500, gray-600, teal-100,
|
|
9
|
-
teal-300, teal-400, teal-500, green-100, green-200, green-300, green-400, green-500,
|
|
10
|
-
yellow-200, yellow-300, yellow-400, yellow-500, red-100, red-200, red-300, red-400,
|
|
11
|
-
blue-100, blue-200, blue-300, blue-400, blue-500, magenta-100, magenta-200, magenta-300,
|
|
8
|
+
@COLOR_NAME_OPTIONS: white, gray-100, gray-200, gray-300, gray-400, gray-500, gray-600, teal-100,
|
|
9
|
+
teal-200, teal-300, teal-400, teal-500, green-100, green-200, green-300, green-400, green-500,
|
|
10
|
+
yellow-100, yellow-200, yellow-300, yellow-400, yellow-500, red-100, red-200, red-300, red-400,
|
|
11
|
+
red-500, blue-100, blue-200, blue-300, blue-400, blue-500, magenta-100, magenta-200, magenta-300,
|
|
12
12
|
magenta-400, magenta-500;
|
|
13
13
|
@COLOR_SCHEME_OPTIONS: base, banner, invert;
|
|
14
14
|
@HEADING_LEVEL_OPTIONS: h1, h2, h3, h4, h5;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
export * from './aria';
|
|
1
2
|
export * from './color/module-color';
|
|
2
3
|
export * from './color-scheme';
|
|
3
4
|
export * from './css-module';
|
|
4
5
|
export * from './dom/props';
|
|
6
|
+
export * from './events';
|
|
7
|
+
export * from './field';
|
|
8
|
+
export * from './input';
|
|
5
9
|
export * from './instrument';
|
|
6
10
|
export * from './keyboard';
|
|
7
11
|
export * from './layout';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { getDatasetProps, getExternalUrlProps } from './dom/props/index.js';
|
|
2
2
|
export { mapEdgeKeyToStandard } from './keyboard/index.js';
|
|
3
3
|
export { currentHostname, currentHref } from './location/index.js';
|
|
4
|
+
export { getAriaProps } from './aria/utils.js';
|
|
4
5
|
export { useColorClassNames } from './color/module-color/hooks/useColorClassNames.js';
|
|
5
6
|
export { colorSchemes } from './color-scheme/colorSchemes.js';
|
|
6
7
|
export { ColorScheme } from './color-scheme/classes/ColorScheme.js';
|
|
@@ -8,6 +9,12 @@ export { ColorSchemeProvider } from './color-scheme/providers/ColorSchemeProvide
|
|
|
8
9
|
export { useColorScheme } from './color-scheme/hooks/useColorScheme.js';
|
|
9
10
|
export { withColorScheme } from './color-scheme/hocs/withColorScheme.js';
|
|
10
11
|
export { booleanClassNames, globalClassNames, longhandClassNames, moduleClassName, moduleClassNames, moduleLocals, stringClassNames } from './css-module/classNames.js';
|
|
12
|
+
export { useFocusEvents } from './events/hooks/useFocusEvents.js';
|
|
13
|
+
export { FIELD_TYPE_DEFAULT } from './field/constants.js';
|
|
14
|
+
export { useTextField } from './field/hooks/useTextField.js';
|
|
15
|
+
export { AUTO_COMPLETE_DATE_DEFAULT, AUTO_COMPLETE_PASSWORD_DEFAULT, AUTO_COMPLETE_TEXT_DEFAULT, INPUT_TYPE_DEFAULT } from './input/constants.js';
|
|
16
|
+
export { AUTO_COMPLETE_DATE_OPTIONS, AUTO_COMPLETE_PASSWORD_OPTIONS, AUTO_COMPLETE_TEXT_OPTIONS, INPUT_TYPE_OPTIONS, INPUT_TYPE_SIMPLE_TEXT_OPTIONS } from './input/options.js';
|
|
17
|
+
export { useForcedRef } from './input/util.js';
|
|
11
18
|
export { useInstrument } from './instrument/hooks/useInstrument.js';
|
|
12
19
|
export { InstrumentProvider } from './instrument/providers/Instrument.js';
|
|
13
20
|
export { useLayoutClassNames } from './layout/hooks/useLayoutClassNames.js';
|
|
@@ -39,4 +46,4 @@ export { withGetToken } from './token/hocs/withGetToken.js';
|
|
|
39
46
|
export { useTextAccentClassnames } from './typography/module-text-accent/hooks/useTextAccentClassnames.js';
|
|
40
47
|
export { useTextCenteredClassnames } from './typography/module-text-centered/hooks/useTextCenteredClassnames.js';
|
|
41
48
|
export { useTextWeightClassNames } from './typography/module-text-weight/hooks/useTextWeightClassNames.js';
|
|
42
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
49
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ==
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
const INPUT_TYPE_DEFAULT = 'text';
|
|
2
|
+
const AUTO_COMPLETE_TEXT_DEFAULT = 'off';
|
|
3
|
+
const AUTO_COMPLETE_PASSWORD_DEFAULT = 'off';
|
|
4
|
+
const AUTO_COMPLETE_DATE_DEFAULT = 'off';
|
|
5
|
+
|
|
6
|
+
export { AUTO_COMPLETE_DATE_DEFAULT, AUTO_COMPLETE_PASSWORD_DEFAULT, AUTO_COMPLETE_TEXT_DEFAULT, INPUT_TYPE_DEFAULT };
|
|
7
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5wdXQvY29uc3RhbnRzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCBJTlBVVF9UWVBFX0RFRkFVTFQgPSAndGV4dCc7XG5cbmV4cG9ydCBjb25zdCBBVVRPX0NPTVBMRVRFX1RFWFRfREVGQVVMVCA9ICdvZmYnO1xuZXhwb3J0IGNvbnN0IEFVVE9fQ09NUExFVEVfUEFTU1dPUkRfREVGQVVMVCA9ICdvZmYnO1xuZXhwb3J0IGNvbnN0IEFVVE9fQ09NUExFVEVfREFURV9ERUZBVUxUID0gJ29mZic7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ik1BQWEsa0JBQWtCLEdBQUcsT0FBTztNQUU1QiwwQkFBMEIsR0FBRyxNQUFNO01BQ25DLDhCQUE4QixHQUFHLE1BQU07TUFDdkMsMEJBQTBCLEdBQUc7Ozs7In0=
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { AUTO_COMPLETE_DATE_DEFAULT, AUTO_COMPLETE_PASSWORD_DEFAULT, AUTO_COMPLETE_TEXT_DEFAULT, INPUT_TYPE_DEFAULT } from './constants.js';
|
|
2
|
+
export { AUTO_COMPLETE_DATE_OPTIONS, AUTO_COMPLETE_PASSWORD_OPTIONS, AUTO_COMPLETE_TEXT_OPTIONS, INPUT_TYPE_OPTIONS, INPUT_TYPE_SIMPLE_TEXT_OPTIONS } from './options.js';
|
|
3
|
+
export { useForcedRef } from './util.js';
|
|
4
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzsifQ==
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Option } from '@preply/ds-core-types';
|
|
2
|
+
import type { AutoCompleteDateOptions, AutoCompletePasswordOptions, AutoCompleteTextOptions, InputType } from './types';
|
|
3
|
+
export declare const INPUT_TYPE_SIMPLE_TEXT_OPTIONS: Option<InputType>[];
|
|
4
|
+
export declare const INPUT_TYPE_OPTIONS: Option<InputType>[];
|
|
5
|
+
export declare const AUTO_COMPLETE_TEXT_OPTIONS: Option<AutoCompleteTextOptions>[];
|
|
6
|
+
export declare const AUTO_COMPLETE_DATE_OPTIONS: Option<AutoCompleteDateOptions>[];
|
|
7
|
+
export declare const AUTO_COMPLETE_PASSWORD_OPTIONS: Option<AutoCompletePasswordOptions>[];
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
const INPUT_TYPE_SIMPLE_TEXT_OPTIONS = [
|
|
2
|
+
{ id: 'text' },
|
|
3
|
+
{ id: 'search' },
|
|
4
|
+
{ id: 'email' },
|
|
5
|
+
{ id: 'tel' },
|
|
6
|
+
{ id: 'url' },
|
|
7
|
+
];
|
|
8
|
+
const INPUT_TYPE_OPTIONS = [
|
|
9
|
+
...INPUT_TYPE_SIMPLE_TEXT_OPTIONS,
|
|
10
|
+
{ id: 'password' },
|
|
11
|
+
{ id: 'number' },
|
|
12
|
+
{ id: 'date' },
|
|
13
|
+
{ id: 'time' },
|
|
14
|
+
{ id: 'checkbox' },
|
|
15
|
+
{ id: 'radio' },
|
|
16
|
+
{ id: 'textarea' },
|
|
17
|
+
{ id: 'select' },
|
|
18
|
+
];
|
|
19
|
+
const AUTO_COMPLETE_TEXT_OPTIONS = [
|
|
20
|
+
{ id: 'off' },
|
|
21
|
+
{ id: 'on' },
|
|
22
|
+
{ id: 'name' },
|
|
23
|
+
{ id: 'email' },
|
|
24
|
+
{ id: 'username' },
|
|
25
|
+
{ id: 'language' },
|
|
26
|
+
{ id: 'tel' },
|
|
27
|
+
{ id: 'url' },
|
|
28
|
+
];
|
|
29
|
+
const AUTO_COMPLETE_DATE_OPTIONS = [
|
|
30
|
+
{ id: 'off' },
|
|
31
|
+
{ id: 'on' },
|
|
32
|
+
];
|
|
33
|
+
const AUTO_COMPLETE_PASSWORD_OPTIONS = [
|
|
34
|
+
{ id: 'off' },
|
|
35
|
+
{ id: 'new-password' },
|
|
36
|
+
{ id: 'current-password' },
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
export { AUTO_COMPLETE_DATE_OPTIONS, AUTO_COMPLETE_PASSWORD_OPTIONS, AUTO_COMPLETE_TEXT_OPTIONS, INPUT_TYPE_OPTIONS, INPUT_TYPE_SIMPLE_TEXT_OPTIONS };
|
|
40
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9ucy5qcyIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2lucHV0L29wdGlvbnMudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBPcHRpb24gfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUtdHlwZXMnO1xuXG5pbXBvcnQgdHlwZSB7XG4gICAgQXV0b0NvbXBsZXRlRGF0ZU9wdGlvbnMsXG4gICAgQXV0b0NvbXBsZXRlUGFzc3dvcmRPcHRpb25zLFxuICAgIEF1dG9Db21wbGV0ZVRleHRPcHRpb25zLFxuICAgIElucHV0VHlwZSxcbn0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBJTlBVVF9UWVBFX1NJTVBMRV9URVhUX09QVElPTlM6IE9wdGlvbjxJbnB1dFR5cGU+W10gPSBbXG4gICAgeyBpZDogJ3RleHQnIH0sXG4gICAgeyBpZDogJ3NlYXJjaCcgfSxcbiAgICB7IGlkOiAnZW1haWwnIH0sXG4gICAgeyBpZDogJ3RlbCcgfSxcbiAgICB7IGlkOiAndXJsJyB9LFxuXTtcblxuZXhwb3J0IGNvbnN0IElOUFVUX1RZUEVfT1BUSU9OUzogT3B0aW9uPElucHV0VHlwZT5bXSA9IFtcbiAgICAuLi5JTlBVVF9UWVBFX1NJTVBMRV9URVhUX09QVElPTlMsXG4gICAgeyBpZDogJ3Bhc3N3b3JkJyB9LFxuICAgIHsgaWQ6ICdudW1iZXInIH0sXG4gICAgeyBpZDogJ2RhdGUnIH0sXG4gICAgeyBpZDogJ3RpbWUnIH0sXG4gICAgeyBpZDogJ2NoZWNrYm94JyB9LFxuICAgIHsgaWQ6ICdyYWRpbycgfSxcbiAgICB7IGlkOiAndGV4dGFyZWEnIH0sXG4gICAgeyBpZDogJ3NlbGVjdCcgfSxcbl07XG5cbmV4cG9ydCBjb25zdCBBVVRPX0NPTVBMRVRFX1RFWFRfT1BUSU9OUzogT3B0aW9uPEF1dG9Db21wbGV0ZVRleHRPcHRpb25zPltdID0gW1xuICAgIHsgaWQ6ICdvZmYnIH0sXG4gICAgeyBpZDogJ29uJyB9LFxuICAgIHsgaWQ6ICduYW1lJyB9LFxuICAgIHsgaWQ6ICdlbWFpbCcgfSxcbiAgICB7IGlkOiAndXNlcm5hbWUnIH0sXG4gICAgeyBpZDogJ2xhbmd1YWdlJyB9LFxuICAgIHsgaWQ6ICd0ZWwnIH0sXG4gICAgeyBpZDogJ3VybCcgfSxcbl07XG5cbmV4cG9ydCBjb25zdCBBVVRPX0NPTVBMRVRFX0RBVEVfT1BUSU9OUzogT3B0aW9uPEF1dG9Db21wbGV0ZURhdGVPcHRpb25zPltdID0gW1xuICAgIHsgaWQ6ICdvZmYnIH0sXG4gICAgeyBpZDogJ29uJyB9LFxuXTtcblxuZXhwb3J0IGNvbnN0IEFVVE9fQ09NUExFVEVfUEFTU1dPUkRfT1BUSU9OUzogT3B0aW9uPEF1dG9Db21wbGV0ZVBhc3N3b3JkT3B0aW9ucz5bXSA9IFtcbiAgICB7IGlkOiAnb2ZmJyB9LFxuICAgIHsgaWQ6ICduZXctcGFzc3dvcmQnIH0sXG4gICAgeyBpZDogJ2N1cnJlbnQtcGFzc3dvcmQnIH0sXG5dO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJNQVNhLDhCQUE4QixHQUF3QjtJQUMvRCxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUU7SUFDZCxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUU7SUFDaEIsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFFO0lBQ2YsRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFO0lBQ2IsRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFO0VBQ2Y7TUFFVyxrQkFBa0IsR0FBd0I7SUFDbkQsR0FBRyw4QkFBOEI7SUFDakMsRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFO0lBQ2xCLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRTtJQUNoQixFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUU7SUFDZCxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUU7SUFDZCxFQUFFLEVBQUUsRUFBRSxVQUFVLEVBQUU7SUFDbEIsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFFO0lBQ2YsRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFO0lBQ2xCLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRTtFQUNsQjtNQUVXLDBCQUEwQixHQUFzQztJQUN6RSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUU7SUFDYixFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUU7SUFDWixFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUU7SUFDZCxFQUFFLEVBQUUsRUFBRSxPQUFPLEVBQUU7SUFDZixFQUFFLEVBQUUsRUFBRSxVQUFVLEVBQUU7SUFDbEIsRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFO0lBQ2xCLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRTtJQUNiLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRTtFQUNmO01BRVcsMEJBQTBCLEdBQXNDO0lBQ3pFLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRTtJQUNiLEVBQUUsRUFBRSxFQUFFLElBQUksRUFBRTtFQUNkO01BRVcsOEJBQThCLEdBQTBDO0lBQ2pGLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRTtJQUNiLEVBQUUsRUFBRSxFQUFFLGNBQWMsRUFBRTtJQUN0QixFQUFFLEVBQUUsRUFBRSxrQkFBa0IsRUFBRTs7Ozs7In0=
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import type { Dataset } from '@preply/ds-core';
|
|
2
|
+
import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
|
|
3
|
+
declare type ARIAAttributeNames = 'aria-describedby' | 'aria-disabled' | 'aria-invalid' | 'aria-required';
|
|
4
|
+
declare type WithRequired<T, K extends keyof T> = T & {
|
|
5
|
+
[P in K]-?: T[P];
|
|
6
|
+
};
|
|
7
|
+
export declare type ARIAInputPropsMap = WithRequired<ARIAInputProps, ARIAAttributeNames>;
|
|
8
|
+
export declare type ARIAInputProps = Pick<React.HTMLAttributes<HTMLInputElement>, ARIAAttributeNames>;
|
|
9
|
+
export declare type SimpleTextInputType = 'text' | 'search' | 'email' | 'tel' | 'url';
|
|
10
|
+
export declare type SingleLineInputType = SimpleTextInputType | 'password' | 'number' | 'date' | 'time';
|
|
11
|
+
export declare type HTMLInputType = SingleLineInputType | 'checkbox' | 'radio';
|
|
12
|
+
export declare type InputType = HTMLInputType | 'textarea' | 'select';
|
|
13
|
+
export declare type AutoCompleteTextOptions = 'off' | 'on' | 'name' | 'email' | 'username' | 'language' | 'tel' | 'url';
|
|
14
|
+
export declare type AutoCompleteDateOptions = 'off' | 'on';
|
|
15
|
+
export declare type AutoCompletePasswordOptions = 'off' | 'new-password' | 'current-password';
|
|
16
|
+
export interface InputCommonProps extends ARIAInputProps {
|
|
17
|
+
type: InputType;
|
|
18
|
+
id: string;
|
|
19
|
+
name?: string;
|
|
20
|
+
value?: string;
|
|
21
|
+
defaultValue?: string;
|
|
22
|
+
onChange?: ChangeEventHandler;
|
|
23
|
+
onFocus?: FocusEventHandler;
|
|
24
|
+
onBlur?: FocusEventHandler;
|
|
25
|
+
onClick?: MouseEventHandler;
|
|
26
|
+
onKeyDown?: KeyboardEventHandler;
|
|
27
|
+
onKeyUp?: KeyboardEventHandler;
|
|
28
|
+
required?: boolean;
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
hasError?: boolean;
|
|
31
|
+
dataset?: Dataset;
|
|
32
|
+
}
|
|
33
|
+
export interface InputStringProps extends InputCommonProps {
|
|
34
|
+
type: SingleLineInputType | 'textarea';
|
|
35
|
+
placeholder?: string;
|
|
36
|
+
maxLength?: number;
|
|
37
|
+
}
|
|
38
|
+
export interface InputSingleLineProps extends InputStringProps {
|
|
39
|
+
type: SingleLineInputType;
|
|
40
|
+
}
|
|
41
|
+
export interface SimpleTextInputTypeProps extends InputSingleLineProps {
|
|
42
|
+
type: SimpleTextInputType;
|
|
43
|
+
autoComplete?: AutoCompleteTextOptions;
|
|
44
|
+
}
|
|
45
|
+
export interface InputTypeTextProps extends SimpleTextInputTypeProps {
|
|
46
|
+
type: 'text';
|
|
47
|
+
}
|
|
48
|
+
export interface InputTypeSearchProps extends SimpleTextInputTypeProps {
|
|
49
|
+
type: 'search';
|
|
50
|
+
}
|
|
51
|
+
export interface InputTypeEmailProps extends SimpleTextInputTypeProps {
|
|
52
|
+
type: 'email';
|
|
53
|
+
}
|
|
54
|
+
export interface InputTypeTelProps extends SimpleTextInputTypeProps {
|
|
55
|
+
type: 'tel';
|
|
56
|
+
}
|
|
57
|
+
export interface InputTypeUrlProps extends SimpleTextInputTypeProps {
|
|
58
|
+
type: 'url';
|
|
59
|
+
}
|
|
60
|
+
export interface InputTypePasswordProps extends InputSingleLineProps {
|
|
61
|
+
type: 'password';
|
|
62
|
+
autoComplete?: AutoCompletePasswordOptions;
|
|
63
|
+
}
|
|
64
|
+
export interface InputBoundedProps extends InputSingleLineProps {
|
|
65
|
+
type: 'number' | 'date' | 'time';
|
|
66
|
+
min?: string;
|
|
67
|
+
max?: string;
|
|
68
|
+
}
|
|
69
|
+
export interface InputTypeNumberProps extends InputBoundedProps {
|
|
70
|
+
type: 'number';
|
|
71
|
+
}
|
|
72
|
+
export interface InputTypeDateProps extends InputBoundedProps {
|
|
73
|
+
type: 'date';
|
|
74
|
+
autoComplete?: AutoCompleteDateOptions;
|
|
75
|
+
}
|
|
76
|
+
export interface InputTypeTimeProps extends InputBoundedProps {
|
|
77
|
+
type: 'time';
|
|
78
|
+
}
|
|
79
|
+
export interface InputCheckableProps extends InputCommonProps {
|
|
80
|
+
type: 'checkbox' | 'radio';
|
|
81
|
+
checked?: boolean;
|
|
82
|
+
}
|
|
83
|
+
export interface InputTypeCheckboxProps extends InputCheckableProps {
|
|
84
|
+
type: 'checkbox';
|
|
85
|
+
}
|
|
86
|
+
export interface InputTypeRadioProps extends InputCommonProps, InputCheckableProps {
|
|
87
|
+
type: 'radio';
|
|
88
|
+
name: string;
|
|
89
|
+
}
|
|
90
|
+
export interface InputTypeTextareaProps extends InputStringProps {
|
|
91
|
+
type: 'textarea';
|
|
92
|
+
rows?: number;
|
|
93
|
+
}
|
|
94
|
+
export interface InputTypeSelectProps extends InputCommonProps {
|
|
95
|
+
type: 'select';
|
|
96
|
+
children?: ReactNode;
|
|
97
|
+
}
|
|
98
|
+
export declare type InputGenericTextProps = InputTypeTextProps | InputTypeSearchProps | InputTypeEmailProps | InputTypeTelProps | InputTypeUrlProps;
|
|
99
|
+
declare type UnknownInputProps = InputTypeTextProps | InputTypeSearchProps | InputTypeEmailProps | InputTypeTelProps | InputTypeUrlProps | InputTypePasswordProps | InputTypeNumberProps | InputTypeDateProps | InputTypeTimeProps | InputTypeCheckboxProps | InputTypeRadioProps | InputTypeTextareaProps | InputTypeSelectProps;
|
|
100
|
+
export declare type InputProps = UnknownInputProps & {
|
|
101
|
+
className?: string;
|
|
102
|
+
};
|
|
103
|
+
export declare type CombinableInputProps<T extends InputCommonProps> = Omit<T, 'id' | 'type'> & {
|
|
104
|
+
id?: string;
|
|
105
|
+
};
|
|
106
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { useState, useEffect, useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
function useForcedRef() {
|
|
4
|
+
const [init] = useState(true);
|
|
5
|
+
const [, setFauxState] = useState(false);
|
|
6
|
+
useEffect(() => setFauxState(init), [init]);
|
|
7
|
+
return useRef(null);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { useForcedRef };
|
|
11
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2lucHV0L3V0aWwudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVmT2JqZWN0LCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiB1c2VGb3JjZWRSZWY8VD4oKTogUmVmT2JqZWN0PFQ+IHtcbiAgICBjb25zdCBbaW5pdF0gPSB1c2VTdGF0ZTxib29sZWFuPih0cnVlKTtcbiAgICBjb25zdCBbLCBzZXRGYXV4U3RhdGVdID0gdXNlU3RhdGU8Ym9vbGVhbj4oZmFsc2UpO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHNldEZhdXhTdGF0ZShpbml0KSwgW2luaXRdKTtcblxuICAgIHJldHVybiB1c2VSZWY8VD4obnVsbCk7XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7U0FFZ0IsWUFBWTtJQUN4QixNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsUUFBUSxDQUFVLElBQUksQ0FBQyxDQUFDO0lBQ3ZDLE1BQU0sR0FBRyxZQUFZLENBQUMsR0FBRyxRQUFRLENBQVUsS0FBSyxDQUFDLENBQUM7SUFFbEQsU0FBUyxDQUFDLE1BQU0sWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUU1QyxPQUFPLE1BQU0sQ0FBSSxJQUFJLENBQUMsQ0FBQztBQUMzQjs7OzsifQ==
|
|
@@ -37,16 +37,20 @@
|
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
.text-variant(@text-variant) {
|
|
41
|
+
@token: 'variant-@{text-variant}';
|
|
42
|
+
.font-size('text', @token);
|
|
43
|
+
.font-weight('text', @token);
|
|
44
|
+
.line-height('text', @token);
|
|
45
|
+
.letter-spacing('text', @token);
|
|
46
|
+
.font-style('text', @token);
|
|
47
|
+
}
|
|
48
|
+
|
|
40
49
|
.text-variants() {
|
|
41
50
|
.responsive({
|
|
42
51
|
each(@TEXT_VARIANT_OPTIONS, {
|
|
43
52
|
&--variant-@{value} {
|
|
44
|
-
@
|
|
45
|
-
.font-size('text', @token);
|
|
46
|
-
.font-weight('text', @token);
|
|
47
|
-
.line-height('text', @token);
|
|
48
|
-
.letter-spacing('text', @token);
|
|
49
|
-
.font-style('text', @token)
|
|
53
|
+
.text-variant(@value);
|
|
50
54
|
}
|
|
51
55
|
});
|
|
52
56
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@preply/ds-web-core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.47.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"dev": "run build:rollup -w"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@preply/ds-core": "0.
|
|
23
|
-
"@preply/ds-core-types": "0.
|
|
22
|
+
"@preply/ds-core": "0.47.0",
|
|
23
|
+
"@preply/ds-core-types": "0.47.0"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@preply/ds-core": "0.
|
|
27
|
-
"@preply/ds-core-types": "0.
|
|
26
|
+
"@preply/ds-core": "0.47.0",
|
|
27
|
+
"@preply/ds-core-types": "0.47.0",
|
|
28
28
|
"react": "^16.8.3",
|
|
29
29
|
"react-dom": "^16.8.3"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "9c70f1ccd45196cc6e404e1d4f59ebfe90f33e9d"
|
|
32
32
|
}
|