@dr.pogodin/react-utils 1.48.7 → 1.48.8
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/build/development/shared/components/Input/index.js +4 -1
- package/build/development/shared/components/Input/index.js.map +1 -1
- package/build/production/shared/components/Input/index.js +1 -1
- package/build/production/shared/components/Input/index.js.map +1 -1
- package/build/types-code/shared/components/Input/index.d.ts +2 -1
- package/build/web/shared/components/Input/index.js +4 -1
- package/build/web/shared/components/Input/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -22,6 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
22
22
|
*/
|
|
23
23
|
const Input = ({
|
|
24
24
|
children,
|
|
25
|
+
composeAdhocTheme,
|
|
25
26
|
error,
|
|
26
27
|
label,
|
|
27
28
|
ref,
|
|
@@ -29,7 +30,9 @@ const Input = ({
|
|
|
29
30
|
theme,
|
|
30
31
|
...rest
|
|
31
32
|
}) => {
|
|
32
|
-
const composed = useTheme('Input', defaultTheme, theme
|
|
33
|
+
const composed = useTheme('Input', defaultTheme, theme, {
|
|
34
|
+
composeAdhocTheme
|
|
35
|
+
});
|
|
33
36
|
|
|
34
37
|
// NOTE: As of now, it is only updated when "theme.focused" is defined,
|
|
35
38
|
// as otherwise its value is not used.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useRef","useState","useTheme","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","error","label","ref","testId","theme","rest","composed","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n type FunctionComponent,\n type ReactNode,\n type Ref,\n useRef,\n useState,\n} from 'react';\n\nimport { type Theme, useTheme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n children?: ReactNode;\n error?: ReactNode;\n label?: React.ReactNode;\n ref?: Ref<HTMLInputElement>;\n testId?: string;\n theme?: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n children,\n error,\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const composed = useTheme('Input', defaultTheme, theme);\n\n // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n // as otherwise its value is not used.\n const [focused, setFocused] = useState(false);\n\n const localRef = useRef<HTMLInputElement>(null);\n\n let containerClassName = composed.container;\n\n // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n // is provided.\n if (focused /* && theme.focused */) containerClassName += ` ${composed.focused}`;\n\n if (!rest.value && composed.empty) containerClassName += ` ${composed.empty}`;\n\n if (error) containerClassName += ` ${composed.error}`;\n\n return (\n <div\n className={containerClassName}\n onFocus={() => {\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref?.current?.focus();\n else localRef.current?.focus();\n }}\n >\n {label === undefined\n ? null : <div className={composed.label}>{label}</div>}\n <input\n className={composed.input}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n ref={ref ?? localRef}\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n\n onBlur={composed.focused ? (e) => {\n setFocused(false);\n rest.onBlur?.(e);\n } : rest.onBlur}\n onFocus={composed.focused ? (e) => {\n setFocused(true);\n rest.onFocus?.(e);\n } : rest.onFocus}\n />\n {error && error !== true\n ? <div className={composed.errorMessage}>{error}</div>\n : null}\n {children ? <div className={composed.children}>{children}</div> : null}\n </div>\n );\n};\n\nexport default Input;\n"],"mappings":"AAAA,SAIEA,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,
|
|
1
|
+
{"version":3,"file":"index.js","names":["useRef","useState","useTheme","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","composeAdhocTheme","error","label","ref","testId","theme","rest","composed","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n type FunctionComponent,\n type ReactNode,\n type Ref,\n useRef,\n useState,\n} from 'react';\n\nimport { type COMPOSE, type Theme, useTheme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n children?: ReactNode;\n composeAdhocTheme?: COMPOSE;\n error?: ReactNode;\n label?: React.ReactNode;\n ref?: Ref<HTMLInputElement>;\n testId?: string;\n theme?: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n children,\n composeAdhocTheme,\n error,\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const composed = useTheme('Input', defaultTheme, theme, {\n composeAdhocTheme,\n });\n\n // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n // as otherwise its value is not used.\n const [focused, setFocused] = useState(false);\n\n const localRef = useRef<HTMLInputElement>(null);\n\n let containerClassName = composed.container;\n\n // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n // is provided.\n if (focused /* && theme.focused */) containerClassName += ` ${composed.focused}`;\n\n if (!rest.value && composed.empty) containerClassName += ` ${composed.empty}`;\n\n if (error) containerClassName += ` ${composed.error}`;\n\n return (\n <div\n className={containerClassName}\n onFocus={() => {\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref?.current?.focus();\n else localRef.current?.focus();\n }}\n >\n {label === undefined\n ? null : <div className={composed.label}>{label}</div>}\n <input\n className={composed.input}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n ref={ref ?? localRef}\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n\n onBlur={composed.focused ? (e) => {\n setFocused(false);\n rest.onBlur?.(e);\n } : rest.onBlur}\n onFocus={composed.focused ? (e) => {\n setFocused(true);\n rest.onFocus?.(e);\n } : rest.onFocus}\n />\n {error && error !== true\n ? <div className={composed.errorMessage}>{error}</div>\n : null}\n {children ? <div className={composed.children}>{children}</div> : null}\n </div>\n );\n};\n\nexport default Input;\n"],"mappings":"AAAA,SAIEA,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,SAAmCC,QAAQ,QAAQ,0BAA0B;AAAA,MAAAC,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAErC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAexC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAgC,GAAGA,CAAC;EACxCC,QAAQ;EACRC,iBAAiB;EACjBC,KAAK;EACLC,KAAK;EACLC,GAAG;EACHC,MAAM;EACNC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAGf,QAAQ,CAAC,OAAO,EAAEC,YAAY,EAAEY,KAAK,EAAE;IACtDL;EACF,CAAC,CAAC;;EAEF;EACA;EACA,MAAM,CAACQ,OAAO,EAAEC,UAAU,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMmB,QAAQ,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAE/C,IAAIqB,kBAAkB,GAAGJ,QAAQ,CAACK,SAAS;;EAE3C;EACA;EACA,IAAIJ,OAAO,CAAC,wBAAwBG,kBAAkB,IAAI,IAAIJ,QAAQ,CAACC,OAAO,EAAE;EAEhF,IAAI,CAACF,IAAI,CAACO,KAAK,IAAIN,QAAQ,CAACO,KAAK,EAAEH,kBAAkB,IAAI,IAAIJ,QAAQ,CAACO,KAAK,EAAE;EAE7E,IAAIb,KAAK,EAAEU,kBAAkB,IAAI,IAAIJ,QAAQ,CAACN,KAAK,EAAE;EAErD,oBACEJ,KAAA;IACEkB,SAAS,EAAEJ,kBAAmB;IAC9BK,OAAO,EAAEA,CAAA,KAAM;MACb;MACA;MACA;MACA,IAAI,OAAOb,GAAG,KAAK,QAAQ,EAAEA,GAAG,EAAEc,OAAO,EAAEC,KAAK,CAAC,CAAC,CAAC,KAC9CR,QAAQ,CAACO,OAAO,EAAEC,KAAK,CAAC,CAAC;IAChC,CAAE;IAAAnB,QAAA,GAEDG,KAAK,KAAKiB,SAAS,GAChB,IAAI,gBAAGxB,IAAA;MAAKoB,SAAS,EAAER,QAAQ,CAACL,KAAM;MAAAH,QAAA,EAAEG;IAAK,CAAM,CAAC,eACxDP,IAAA;MACEoB,SAAS,EAAER,QAAQ,CAACa,KAAM;MAC1B,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGJ,SAAS,GAAGf,MAAO;MACxED,GAAG,EAAEA,GAAG,IAAIO;;MAEZ;MACA;MAAA;;MAAA,GACIJ,IAAI;MAERkB,MAAM,EAAEjB,QAAQ,CAACC,OAAO,GAAIiB,CAAC,IAAK;QAChChB,UAAU,CAAC,KAAK,CAAC;QACjBH,IAAI,CAACkB,MAAM,GAAGC,CAAC,CAAC;MAClB,CAAC,GAAGnB,IAAI,CAACkB,MAAO;MAChBR,OAAO,EAAET,QAAQ,CAACC,OAAO,GAAIiB,CAAC,IAAK;QACjChB,UAAU,CAAC,IAAI,CAAC;QAChBH,IAAI,CAACU,OAAO,GAAGS,CAAC,CAAC;MACnB,CAAC,GAAGnB,IAAI,CAACU;IAAQ,CAClB,CAAC,EACDf,KAAK,IAAIA,KAAK,KAAK,IAAI,gBACpBN,IAAA;MAAKoB,SAAS,EAAER,QAAQ,CAACmB,YAAa;MAAA3B,QAAA,EAAEE;IAAK,CAAM,CAAC,GACpD,IAAI,EACPF,QAAQ,gBAAGJ,IAAA;MAAKoB,SAAS,EAAER,QAAQ,CAACR,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAM,CAAC,GAAG,IAAI;EAAA,CACnE,CAAC;AAEV,CAAC;AAED,eAAeD,KAAK","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ import{useRef,useState}from"react";import{useTheme}from"@dr.pogodin/react-themes
|
|
|
5
5
|
* @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
|
|
6
6
|
* @param [props...] Any other properties are passed to the underlying
|
|
7
7
|
* `<input>` element.
|
|
8
|
-
*/const Input=({children,error,label,ref,testId,theme,...rest})=>{const composed=useTheme("Input",defaultTheme,theme);// NOTE: As of now, it is only updated when "theme.focused" is defined,
|
|
8
|
+
*/const Input=({children,composeAdhocTheme,error,label,ref,testId,theme,...rest})=>{const composed=useTheme("Input",defaultTheme,theme,{composeAdhocTheme});// NOTE: As of now, it is only updated when "theme.focused" is defined,
|
|
9
9
|
// as otherwise its value is not used.
|
|
10
10
|
const[focused,setFocused]=useState(false);const localRef=useRef(null);let containerClassName=composed.container;// NOTE: As of now, "focused" can be true only when "theme.focused"
|
|
11
11
|
// is provided.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useRef","useState","useTheme","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","error","label","ref","testId","theme","rest","composed","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n type FunctionComponent,\n type ReactNode,\n type Ref,\n useRef,\n useState,\n} from 'react';\n\nimport { type Theme, useTheme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n children?: ReactNode;\n error?: ReactNode;\n label?: React.ReactNode;\n ref?: Ref<HTMLInputElement>;\n testId?: string;\n theme?: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n children,\n error,\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const composed = useTheme('Input', defaultTheme, theme);\n\n // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n // as otherwise its value is not used.\n const [focused, setFocused] = useState(false);\n\n const localRef = useRef<HTMLInputElement>(null);\n\n let containerClassName = composed.container;\n\n // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n // is provided.\n if (focused /* && theme.focused */) containerClassName += ` ${composed.focused}`;\n\n if (!rest.value && composed.empty) containerClassName += ` ${composed.empty}`;\n\n if (error) containerClassName += ` ${composed.error}`;\n\n return (\n <div\n className={containerClassName}\n onFocus={() => {\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref?.current?.focus();\n else localRef.current?.focus();\n }}\n >\n {label === undefined\n ? null : <div className={composed.label}>{label}</div>}\n <input\n className={composed.input}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n ref={ref ?? localRef}\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n\n onBlur={composed.focused ? (e) => {\n setFocused(false);\n rest.onBlur?.(e);\n } : rest.onBlur}\n onFocus={composed.focused ? (e) => {\n setFocused(true);\n rest.onFocus?.(e);\n } : rest.onFocus}\n />\n {error && error !== true\n ? <div className={composed.errorMessage}>{error}</div>\n : null}\n {children ? <div className={composed.children}>{children}</div> : null}\n </div>\n );\n};\n\nexport default Input;\n"],"mappings":"AAAA,OAIEA,MAAM,CACNC,QAAQ,KACH,OAAO,CAEd,
|
|
1
|
+
{"version":3,"file":"index.js","names":["useRef","useState","useTheme","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","composeAdhocTheme","error","label","ref","testId","theme","rest","composed","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n type FunctionComponent,\n type ReactNode,\n type Ref,\n useRef,\n useState,\n} from 'react';\n\nimport { type COMPOSE, type Theme, useTheme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n children?: ReactNode;\n composeAdhocTheme?: COMPOSE;\n error?: ReactNode;\n label?: React.ReactNode;\n ref?: Ref<HTMLInputElement>;\n testId?: string;\n theme?: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n children,\n composeAdhocTheme,\n error,\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const composed = useTheme('Input', defaultTheme, theme, {\n composeAdhocTheme,\n });\n\n // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n // as otherwise its value is not used.\n const [focused, setFocused] = useState(false);\n\n const localRef = useRef<HTMLInputElement>(null);\n\n let containerClassName = composed.container;\n\n // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n // is provided.\n if (focused /* && theme.focused */) containerClassName += ` ${composed.focused}`;\n\n if (!rest.value && composed.empty) containerClassName += ` ${composed.empty}`;\n\n if (error) containerClassName += ` ${composed.error}`;\n\n return (\n <div\n className={containerClassName}\n onFocus={() => {\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref?.current?.focus();\n else localRef.current?.focus();\n }}\n >\n {label === undefined\n ? null : <div className={composed.label}>{label}</div>}\n <input\n className={composed.input}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n ref={ref ?? localRef}\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n\n onBlur={composed.focused ? (e) => {\n setFocused(false);\n rest.onBlur?.(e);\n } : rest.onBlur}\n onFocus={composed.focused ? (e) => {\n setFocused(true);\n rest.onFocus?.(e);\n } : rest.onFocus}\n />\n {error && error !== true\n ? <div className={composed.errorMessage}>{error}</div>\n : null}\n {children ? <div className={composed.children}>{children}</div> : null}\n </div>\n );\n};\n\nexport default Input;\n"],"mappings":"AAAA,OAIEA,MAAM,CACNC,QAAQ,KACH,OAAO,CAEd,OAAmCC,QAAQ,KAAQ,0BAA0B,OAAAC,YAAA,wKAErC,OAAAC,GAAA,IAAAC,IAAA,CAAAC,IAAA,IAAAC,KAAA,yBAexC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,KAAM,CAAAC,KAAgC,CAAGA,CAAC,CACxCC,QAAQ,CACRC,iBAAiB,CACjBC,KAAK,CACLC,KAAK,CACLC,GAAG,CACHC,MAAM,CACNC,KAAK,CACL,GAAGC,IACL,CAAC,GAAK,CACJ,KAAM,CAAAC,QAAQ,CAAGf,QAAQ,CAAC,OAAO,CAAEC,YAAY,CAAEY,KAAK,CAAE,CACtDL,iBACF,CAAC,CAAC,CAEF;AACA;AACA,KAAM,CAACQ,OAAO,CAAEC,UAAU,CAAC,CAAGlB,QAAQ,CAAC,KAAK,CAAC,CAE7C,KAAM,CAAAmB,QAAQ,CAAGpB,MAAM,CAAmB,IAAI,CAAC,CAE/C,GAAI,CAAAqB,kBAAkB,CAAGJ,QAAQ,CAACK,SAAS,CAE3C;AACA;AACA,GAAIJ,OAAQ,uBAAwBG,kBAAkB,EAAI,IAAIJ,QAAQ,CAACC,OAAO,EAAE,CAEhF,GAAI,CAACF,IAAI,CAACO,KAAK,EAAIN,QAAQ,CAACO,KAAK,CAAEH,kBAAkB,EAAI,IAAIJ,QAAQ,CAACO,KAAK,EAAE,CAE7E,GAAIb,KAAK,CAAEU,kBAAkB,EAAI,IAAIJ,QAAQ,CAACN,KAAK,EAAE,CAErD,mBACEJ,KAAA,QACEkB,SAAS,CAAEJ,kBAAmB,CAC9BK,OAAO,CAAEA,CAAA,GAAM,CACb;AACA;AACA;AACA,GAAI,MAAO,CAAAb,GAAG,GAAK,QAAQ,CAAEA,GAAG,EAAEc,OAAO,EAAEC,KAAK,CAAC,CAAC,CAAC,IAC9C,CAAAR,QAAQ,CAACO,OAAO,EAAEC,KAAK,CAAC,CAC/B,CAAE,CAAAnB,QAAA,EAEDG,KAAK,GAAKiB,SAAS,CAChB,IAAI,cAAGxB,IAAA,QAAKoB,SAAS,CAAER,QAAQ,CAACL,KAAM,CAAAH,QAAA,CAAEG,KAAK,CAAM,CAAC,cACxDP,IAAA,UACEoB,SAAS,CAAER,QAAQ,CAACa,KAAM,CAC1B,cAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,GAAK,YAAY,CAAGJ,SAAS,CAAGf,MAAO,CACxED,GAAG,CAAEA,GAAG,EAAIO,QAEZ;AACA;AAAA,IACIJ,IAAI,CAERkB,MAAM,CAAEjB,QAAQ,CAACC,OAAO,CAAIiB,CAAC,EAAK,CAChChB,UAAU,CAAC,KAAK,CAAC,CACjBH,IAAI,CAACkB,MAAM,GAAGC,CAAC,CACjB,CAAC,CAAGnB,IAAI,CAACkB,MAAO,CAChBR,OAAO,CAAET,QAAQ,CAACC,OAAO,CAAIiB,CAAC,EAAK,CACjChB,UAAU,CAAC,IAAI,CAAC,CAChBH,IAAI,CAACU,OAAO,GAAGS,CAAC,CAClB,CAAC,CAAGnB,IAAI,CAACU,OAAQ,CAClB,CAAC,CACDf,KAAK,EAAIA,KAAK,GAAK,IAAI,cACpBN,IAAA,QAAKoB,SAAS,CAAER,QAAQ,CAACmB,YAAa,CAAA3B,QAAA,CAAEE,KAAK,CAAM,CAAC,CACpD,IAAI,CACPF,QAAQ,cAAGJ,IAAA,QAAKoB,SAAS,CAAER,QAAQ,CAACR,QAAS,CAAAA,QAAA,CAAEA,QAAQ,CAAM,CAAC,CAAG,IAAI,EACnE,CAET,CAAC,CAED,cAAe,CAAAD,KAAK","ignoreList":[]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { type FunctionComponent, type ReactNode, type Ref } from 'react';
|
|
2
|
-
import { type Theme } from '@dr.pogodin/react-themes';
|
|
2
|
+
import { type COMPOSE, type Theme } from '@dr.pogodin/react-themes';
|
|
3
3
|
type ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage' | 'focused' | 'input' | 'label';
|
|
4
4
|
type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
5
5
|
children?: ReactNode;
|
|
6
|
+
composeAdhocTheme?: COMPOSE;
|
|
6
7
|
error?: ReactNode;
|
|
7
8
|
label?: React.ReactNode;
|
|
8
9
|
ref?: Ref<HTMLInputElement>;
|
|
@@ -12,6 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
12
12
|
*/
|
|
13
13
|
const Input = ({
|
|
14
14
|
children,
|
|
15
|
+
composeAdhocTheme,
|
|
15
16
|
error,
|
|
16
17
|
label,
|
|
17
18
|
ref,
|
|
@@ -19,7 +20,9 @@ const Input = ({
|
|
|
19
20
|
theme,
|
|
20
21
|
...rest
|
|
21
22
|
}) => {
|
|
22
|
-
const composed = useTheme('Input', defaultTheme, theme
|
|
23
|
+
const composed = useTheme('Input', defaultTheme, theme, {
|
|
24
|
+
composeAdhocTheme
|
|
25
|
+
});
|
|
23
26
|
|
|
24
27
|
// NOTE: As of now, it is only updated when "theme.focused" is defined,
|
|
25
28
|
// as otherwise its value is not used.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useRef","useState","useTheme","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","error","label","ref","testId","theme","rest","composed","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n type FunctionComponent,\n type ReactNode,\n type Ref,\n useRef,\n useState,\n} from 'react';\n\nimport { type Theme, useTheme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n children?: ReactNode;\n error?: ReactNode;\n label?: React.ReactNode;\n ref?: Ref<HTMLInputElement>;\n testId?: string;\n theme?: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n children,\n error,\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const composed = useTheme('Input', defaultTheme, theme);\n\n // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n // as otherwise its value is not used.\n const [focused, setFocused] = useState(false);\n\n const localRef = useRef<HTMLInputElement>(null);\n\n let containerClassName = composed.container;\n\n // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n // is provided.\n if (focused /* && theme.focused */) containerClassName += ` ${composed.focused}`;\n\n if (!rest.value && composed.empty) containerClassName += ` ${composed.empty}`;\n\n if (error) containerClassName += ` ${composed.error}`;\n\n return (\n <div\n className={containerClassName}\n onFocus={() => {\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref?.current?.focus();\n else localRef.current?.focus();\n }}\n >\n {label === undefined\n ? null : <div className={composed.label}>{label}</div>}\n <input\n className={composed.input}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n ref={ref ?? localRef}\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n\n onBlur={composed.focused ? (e) => {\n setFocused(false);\n rest.onBlur?.(e);\n } : rest.onBlur}\n onFocus={composed.focused ? (e) => {\n setFocused(true);\n rest.onFocus?.(e);\n } : rest.onFocus}\n />\n {error && error !== true\n ? <div className={composed.errorMessage}>{error}</div>\n : null}\n {children ? <div className={composed.children}>{children}</div> : null}\n </div>\n );\n};\n\nexport default Input;\n"],"mappings":"AAAA,SAIEA,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,
|
|
1
|
+
{"version":3,"file":"index.js","names":["useRef","useState","useTheme","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","composeAdhocTheme","error","label","ref","testId","theme","rest","composed","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n type FunctionComponent,\n type ReactNode,\n type Ref,\n useRef,\n useState,\n} from 'react';\n\nimport { type COMPOSE, type Theme, useTheme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n children?: ReactNode;\n composeAdhocTheme?: COMPOSE;\n error?: ReactNode;\n label?: React.ReactNode;\n ref?: Ref<HTMLInputElement>;\n testId?: string;\n theme?: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n children,\n composeAdhocTheme,\n error,\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const composed = useTheme('Input', defaultTheme, theme, {\n composeAdhocTheme,\n });\n\n // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n // as otherwise its value is not used.\n const [focused, setFocused] = useState(false);\n\n const localRef = useRef<HTMLInputElement>(null);\n\n let containerClassName = composed.container;\n\n // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n // is provided.\n if (focused /* && theme.focused */) containerClassName += ` ${composed.focused}`;\n\n if (!rest.value && composed.empty) containerClassName += ` ${composed.empty}`;\n\n if (error) containerClassName += ` ${composed.error}`;\n\n return (\n <div\n className={containerClassName}\n onFocus={() => {\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref?.current?.focus();\n else localRef.current?.focus();\n }}\n >\n {label === undefined\n ? null : <div className={composed.label}>{label}</div>}\n <input\n className={composed.input}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n ref={ref ?? localRef}\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n\n onBlur={composed.focused ? (e) => {\n setFocused(false);\n rest.onBlur?.(e);\n } : rest.onBlur}\n onFocus={composed.focused ? (e) => {\n setFocused(true);\n rest.onFocus?.(e);\n } : rest.onFocus}\n />\n {error && error !== true\n ? <div className={composed.errorMessage}>{error}</div>\n : null}\n {children ? <div className={composed.children}>{children}</div> : null}\n </div>\n );\n};\n\nexport default Input;\n"],"mappings":"AAAA,SAIEA,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,SAAmCC,QAAQ,QAAQ,0BAA0B;AAE7E,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAexC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAgC,GAAGA,CAAC;EACxCC,QAAQ;EACRC,iBAAiB;EACjBC,KAAK;EACLC,KAAK;EACLC,GAAG;EACHC,MAAM;EACNC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAGf,QAAQ,CAAC,OAAO,EAAEC,YAAY,EAAEY,KAAK,EAAE;IACtDL;EACF,CAAC,CAAC;;EAEF;EACA;EACA,MAAM,CAACQ,OAAO,EAAEC,UAAU,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMmB,QAAQ,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAE/C,IAAIqB,kBAAkB,GAAGJ,QAAQ,CAACK,SAAS;;EAE3C;EACA;EACA,IAAIJ,OAAO,CAAC,wBAAwBG,kBAAkB,IAAI,IAAIJ,QAAQ,CAACC,OAAO,EAAE;EAEhF,IAAI,CAACF,IAAI,CAACO,KAAK,IAAIN,QAAQ,CAACO,KAAK,EAAEH,kBAAkB,IAAI,IAAIJ,QAAQ,CAACO,KAAK,EAAE;EAE7E,IAAIb,KAAK,EAAEU,kBAAkB,IAAI,IAAIJ,QAAQ,CAACN,KAAK,EAAE;EAErD,oBACEJ,KAAA;IACEkB,SAAS,EAAEJ,kBAAmB;IAC9BK,OAAO,EAAEA,CAAA,KAAM;MACb;MACA;MACA;MACA,IAAI,OAAOb,GAAG,KAAK,QAAQ,EAAEA,GAAG,EAAEc,OAAO,EAAEC,KAAK,CAAC,CAAC,CAAC,KAC9CR,QAAQ,CAACO,OAAO,EAAEC,KAAK,CAAC,CAAC;IAChC,CAAE;IAAAnB,QAAA,GAEDG,KAAK,KAAKiB,SAAS,GAChB,IAAI,gBAAGxB,IAAA;MAAKoB,SAAS,EAAER,QAAQ,CAACL,KAAM;MAAAH,QAAA,EAAEG;IAAK,CAAM,CAAC,eACxDP,IAAA;MACEoB,SAAS,EAAER,QAAQ,CAACa,KAAM;MAC1B,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGJ,SAAS,GAAGf,MAAO;MACxED,GAAG,EAAEA,GAAG,IAAIO;;MAEZ;MACA;MAAA;MAAA,GACIJ,IAAI;MAERkB,MAAM,EAAEjB,QAAQ,CAACC,OAAO,GAAIiB,CAAC,IAAK;QAChChB,UAAU,CAAC,KAAK,CAAC;QACjBH,IAAI,CAACkB,MAAM,GAAGC,CAAC,CAAC;MAClB,CAAC,GAAGnB,IAAI,CAACkB,MAAO;MAChBR,OAAO,EAAET,QAAQ,CAACC,OAAO,GAAIiB,CAAC,IAAK;QACjChB,UAAU,CAAC,IAAI,CAAC;QAChBH,IAAI,CAACU,OAAO,GAAGS,CAAC,CAAC;MACnB,CAAC,GAAGnB,IAAI,CAACU;IAAQ,CAClB,CAAC,EACDf,KAAK,IAAIA,KAAK,KAAK,IAAI,gBACpBN,IAAA;MAAKoB,SAAS,EAAER,QAAQ,CAACmB,YAAa;MAAA3B,QAAA,EAAEE;IAAK,CAAM,CAAC,GACpD,IAAI,EACPF,QAAQ,gBAAGJ,IAAA;MAAKoB,SAAS,EAAER,QAAQ,CAACR,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAM,CAAC,GAAG,IAAI;EAAA,CACnE,CAAC;AAEV,CAAC;AAED,eAAeD,KAAK","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.48.
|
|
2
|
+
"version": "1.48.8",
|
|
3
3
|
"bin": {
|
|
4
4
|
"react-utils-build": "bin/build.js",
|
|
5
5
|
"react-utils-setup": "bin/setup.js"
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"axios": "^1.13.2",
|
|
20
20
|
"commander": "^14.0.2",
|
|
21
21
|
"compression": "^1.8.1",
|
|
22
|
-
"config": "^4.
|
|
22
|
+
"config": "^4.2.0",
|
|
23
23
|
"cookie": "^1.1.0",
|
|
24
24
|
"cookie-parser": "^1.4.7",
|
|
25
25
|
"core-js": "^3.47.0",
|
|
@@ -91,8 +91,8 @@
|
|
|
91
91
|
"identity-obj-proxy": "^3.0.0",
|
|
92
92
|
"jest": "^30.2.0",
|
|
93
93
|
"jest-environment-jsdom": "^30.2.0",
|
|
94
|
-
"memfs": "^4.
|
|
95
|
-
"mini-css-extract-plugin": "^2.
|
|
94
|
+
"memfs": "^4.53.0",
|
|
95
|
+
"mini-css-extract-plugin": "^2.10.0",
|
|
96
96
|
"mockdate": "^3.0.5",
|
|
97
97
|
"nodelist-foreach-polyfill": "^1.2.0",
|
|
98
98
|
"postcss": "^8.5.6",
|