@bonprix-ds/react-base-input-field 1.0.1 → 1.0.2

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.
Files changed (5) hide show
  1. package/dist/index.d.ts +2 -73
  2. package/dist/index.js +13 -13
  3. package/dist/index.js.map +1 -1
  4. package/dist/src/BaseInputField.d.ts +59 -0
  5. package/package.json +30 -29
package/dist/index.d.ts CHANGED
@@ -1,73 +1,2 @@
1
- import { default as default_2 } from 'react';
2
- import { HTMLInputAutoCompleteAttribute } from 'react';
3
- import { IconType } from '@bonprix-ds/react-icon';
4
- import { RefObject } from 'react';
5
-
6
- declare const BaseInputField: ({ type, onFocus, onBlur, onKeyDown, onKeyUp, inputRef, label, name, id, helperText, errorText, disabled, required, error, inputMode, pattern, autoComplete, autoCorrect, spellCheck, minLength, maxLength, hideClear, describedBy, buttonIcon, iconButtonType, onIconButtonClick, iconButtonLabel, componentName, ...unionProps }: Props) => default_2.JSX.Element;
7
- export default BaseInputField;
8
-
9
- declare interface BaseProps extends HTMLInputAttributes {
10
- type: "text" | "password" | "email";
11
- onFocus?: () => void;
12
- onBlur?: () => void;
13
- inputRef?: RefObject<HTMLInputElement | null>;
14
- label?: string;
15
- name?: string;
16
- id?: string;
17
- helperText?: string;
18
- errorText?: string;
19
- disabled?: boolean;
20
- required?: boolean;
21
- error?: boolean;
22
- hideClear?: boolean;
23
- describedBy?: string;
24
- buttonIcon?: IconType;
25
- onIconButtonClick?: () => void;
26
- iconButtonType?: "button" | "submit";
27
- iconButtonLabel?: string;
28
- componentName: "password-field" | "text-field" | "search-field" | "email-field";
29
- }
30
-
31
- declare interface ControlledInputProps extends BaseProps {
32
- value: string;
33
- onChange: (value: string) => void;
34
- }
35
-
36
- export declare interface HTMLInputAttributes {
37
- /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode" target="_blank">HTML input mode attribute.</a> */
38
- inputMode?: HTMLInputInputModeAttribute;
39
- /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern" target="_blank">HTML pattern attribute.</a> */
40
- pattern?: HTMLInputPatternAttribute;
41
- /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete" target="_blank">HTML autocomplete attribute.</a> */
42
- autoComplete?: HTMLInputAutoCompleteAttribute;
43
- /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect" target="_blank">HTML autocorrect attribute.</a> */
44
- autoCorrect?: HTMLInputAutoCorrectAttribute;
45
- /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck" target="_blank">HTML spellcheck attribute.</a> */
46
- spellCheck?: HTMLInputSpellCheckAttribute;
47
- /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/minlength" target="_blank">HTML minLength attribute.</a> */
48
- minLength?: number;
49
- /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength" target="_blank">HTML maxlength attribute.</a> */
50
- maxLength?: number;
51
- /** Callback, that is triggered on key down. */
52
- onKeyDown?: () => void;
53
- /** Callback that is triggered on key up. */
54
- onKeyUp?: () => void;
55
- }
56
-
57
- declare type HTMLInputAutoCorrectAttribute = "on" | "off";
58
-
59
- declare type HTMLInputInputModeAttribute = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
60
-
61
- declare type HTMLInputPatternAttribute = HTMLInputElement["pattern"];
62
-
63
- declare type HTMLInputSpellCheckAttribute = HTMLInputElement["spellcheck"];
64
-
65
- declare type Props = ControlledInputProps | UncontrolledInputProps;
66
-
67
- declare interface UncontrolledInputProps extends BaseProps {
68
- value?: never;
69
- defaultValue: string;
70
- onChange?: (value: string) => void;
71
- }
72
-
73
- export { }
1
+ export { default } from "./src/BaseInputField";
2
+ export type { HTMLInputAttributes } from "./src/BaseInputField";
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import { InputWrapper as e } from "@bonprix-ds/internal-components";
2
- import t from "@bonprix-ds/react-icon-button";
3
- import { useId as n, useRef as r, useState as i } from "react";
4
- import { tv as a } from "tailwind-variants";
1
+ import { useId as e, useRef as t, useState as n } from "react";
2
+ import { tv as r } from "tailwind-variants";
3
+ import { InputWrapper as i } from "@bonprix-ds/internal-components";
4
+ import a from "@bonprix-ds/react-icon-button";
5
5
  import { jsx as o, jsxs as s } from "react/jsx-runtime";
6
6
  //#region src/BaseInputField.tsx
7
- var c = a({
7
+ var c = r({
8
8
  slots: {
9
9
  root: "preflight w-full group",
10
10
  container: "input flex gap-3 px-3 py-[0.6875rem]",
@@ -38,12 +38,12 @@ var c = a({
38
38
  }, {
39
39
  disabled: !1,
40
40
  error: !0,
41
- class: { input: "[-webkit-text-fill-color:var(--color-fg-error)] text-clr-primary" }
41
+ class: { input: "[-webkit-text-fill-color:var(--bpds-color-fg-error)] text-clr-primary" }
42
42
  }]
43
- }), l = ({ type: a, onFocus: l, onBlur: u, onKeyDown: d, onKeyUp: f, inputRef: p, label: m, name: h, id: g, helperText: _ = "", errorText: v = "", disabled: y = !1, required: b = !1, error: x = !1, inputMode: S, pattern: ee, autoComplete: C, autoCorrect: w, spellCheck: T, minLength: te, maxLength: E, hideClear: D = !1, describedBy: O, buttonIcon: k, iconButtonType: A = "button", onIconButtonClick: j, iconButtonLabel: M, componentName: N, ...P }) => {
44
- let F = n(), I = g ?? F, L = n(), R = n(), z;
43
+ }), l = ({ type: r, onFocus: l, onBlur: u, onKeyDown: d, onKeyUp: f, inputRef: p, label: m, name: h, id: g, helperText: _ = "", errorText: v = "", disabled: y = !1, required: b = !1, error: x = !1, inputMode: S, pattern: ee, autoComplete: C, autoCorrect: w, spellCheck: T, minLength: te, maxLength: E, hideClear: D = !1, describedBy: O, buttonIcon: k, iconButtonType: A = "button", onIconButtonClick: j, iconButtonLabel: M, componentName: N, ...P }) => {
44
+ let F = e(), I = g ?? F, L = e(), R = e(), z;
45
45
  z = P.value === void 0 ? !!P.defaultValue : !!P.value;
46
- let [B, V] = i(!1), [H, U] = i(z), W = H || B, G = r(null), K = p ?? G, { root: q, container: J, input: Y, buttonSection: X, clearButton: Z, iconSeparator: Q } = c({
46
+ let [B, V] = n(!1), [H, U] = n(z), W = H || B, G = t(null), K = p ?? G, { root: q, container: J, input: Y, buttonSection: X, clearButton: Z, iconSeparator: Q } = c({
47
47
  disabled: y,
48
48
  hasValue: H,
49
49
  hideClear: D,
@@ -61,7 +61,7 @@ var c = a({
61
61
  return _ && ($ = L), !y && x && v && ($ = $ ? $ + " " + R : R), O && ($ = $ ? $ + " " + O : O), /* @__PURE__ */ o("div", {
62
62
  className: q(),
63
63
  "data-fix-chrome-page-load-autofill": !0,
64
- children: /* @__PURE__ */ o(e, {
64
+ children: /* @__PURE__ */ o(i, {
65
65
  label: m,
66
66
  id: I,
67
67
  labelFloated: W,
@@ -77,7 +77,7 @@ var c = a({
77
77
  className: J(),
78
78
  children: [/* @__PURE__ */ o("input", {
79
79
  ...P,
80
- type: a,
80
+ type: r,
81
81
  className: Y(),
82
82
  id: I,
83
83
  name: h,
@@ -104,7 +104,7 @@ var c = a({
104
104
  children: [
105
105
  !D && /* @__PURE__ */ o("div", {
106
106
  className: Z(),
107
- children: /* @__PURE__ */ o(t, {
107
+ children: /* @__PURE__ */ o(a, {
108
108
  variant: "tertiary",
109
109
  size: "small",
110
110
  type: "button",
@@ -114,7 +114,7 @@ var c = a({
114
114
  })
115
115
  }),
116
116
  oe && /* @__PURE__ */ o("span", { className: Q() }),
117
- k && /* @__PURE__ */ o(t, {
117
+ k && /* @__PURE__ */ o(a, {
118
118
  variant: "tertiary",
119
119
  size: "small",
120
120
  type: A,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../src/BaseInputField.tsx"],"sourcesContent":["import { InputWrapper } from \"@bonprix-ds/internal-components\";\nimport type { IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport React, { HTMLInputAutoCompleteAttribute, RefObject, useId, useRef, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight w-full group\",\n container: \"input flex gap-3 px-3 py-[0.6875rem]\",\n input: \"w-full flex-grow outline-none text-ellipsis text-inherit typography-input-text bg-transparent\",\n buttonSection: \"flex gap-2 items-center\",\n clearButton: \"invisible\",\n iconSeparator: \"invisible w-0.25 h-5 bg-clr-on-bg-low\",\n },\n variants: {\n hasValue: {\n true: \"\",\n false: \"\",\n },\n disabled: {\n true: \"\",\n false: \"\",\n },\n hideClear: {\n true: {\n input: \"h-6\", // preserve 24px height without buttons\n },\n },\n error: {\n true: \"\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n hasValue: true,\n disabled: false,\n class: {\n clearButton: \"group-hover:visible group-focus-within:visible\",\n iconSeparator: \"group-hover:visible group-focus-within:visible\",\n },\n },\n {\n disabled: false,\n error: true,\n class: {\n // This makes sure the calendar icon is black-ish in Firefox even when the value is marked red.\n // Without this, the icon in Firefox would take the red color as well, which is inconsistent with Chrome and not what we want design-wise.\n // This is a known limitation within Firefox, and we do our best to make the native inputs align, s.: https://bugzilla.mozilla.org/show_bug.cgi?id=1817839\n input: \"[-webkit-text-fill-color:var(--color-fg-error)] text-clr-primary\",\n },\n },\n ],\n});\n\nexport interface HTMLInputAttributes {\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode\" target=\"_blank\">HTML input mode attribute.</a> */\n inputMode?: HTMLInputInputModeAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern\" target=\"_blank\">HTML pattern attribute.</a> */\n pattern?: HTMLInputPatternAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete\" target=\"_blank\">HTML autocomplete attribute.</a> */\n autoComplete?: HTMLInputAutoCompleteAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect\" target=\"_blank\">HTML autocorrect attribute.</a> */\n autoCorrect?: HTMLInputAutoCorrectAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck\" target=\"_blank\">HTML spellcheck attribute.</a> */\n spellCheck?: HTMLInputSpellCheckAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/minlength\" target=\"_blank\">HTML minLength attribute.</a> */\n minLength?: number;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength\" target=\"_blank\">HTML maxlength attribute.</a> */\n maxLength?: number;\n /** Callback, that is triggered on key down. */\n onKeyDown?: () => void;\n /** Callback that is triggered on key up. */\n onKeyUp?: () => void;\n}\n\ntype HTMLInputInputModeAttribute = \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\ntype HTMLInputPatternAttribute = HTMLInputElement[\"pattern\"];\ntype HTMLInputAutoCorrectAttribute = \"on\" | \"off\";\ntype HTMLInputSpellCheckAttribute = HTMLInputElement[\"spellcheck\"];\n\ninterface BaseProps extends HTMLInputAttributes {\n type: \"text\" | \"password\" | \"email\";\n onFocus?: () => void;\n onBlur?: () => void;\n inputRef?: RefObject<HTMLInputElement | null>;\n label?: string;\n name?: string;\n id?: string;\n helperText?: string;\n errorText?: string;\n disabled?: boolean;\n required?: boolean;\n error?: boolean;\n hideClear?: boolean;\n describedBy?: string;\n buttonIcon?: IconType;\n onIconButtonClick?: () => void;\n iconButtonType?: \"button\" | \"submit\";\n iconButtonLabel?: string;\n componentName: \"password-field\" | \"text-field\" | \"search-field\" | \"email-field\";\n}\n\ninterface ControlledInputProps extends BaseProps {\n value: string;\n onChange: (value: string) => void;\n}\n\ninterface UncontrolledInputProps extends BaseProps {\n value?: never;\n defaultValue: string;\n onChange?: (value: string) => void;\n}\n\ntype Props = ControlledInputProps | UncontrolledInputProps;\n\nconst BaseInputField = ({\n type,\n onFocus,\n onBlur,\n onKeyDown,\n onKeyUp,\n inputRef,\n label,\n name,\n id,\n helperText = \"\",\n errorText = \"\",\n disabled = false,\n required = false,\n error = false,\n inputMode,\n pattern,\n autoComplete,\n autoCorrect,\n spellCheck,\n minLength,\n maxLength,\n hideClear = false,\n describedBy,\n buttonIcon,\n iconButtonType = \"button\",\n onIconButtonClick,\n iconButtonLabel,\n componentName,\n ...unionProps\n}: Props) => {\n const generatedId = useId();\n const calculatedId = id ?? generatedId;\n const helperTextId = useId();\n const errorTextId = useId();\n let initialHasValue: boolean;\n if (unionProps.value !== undefined) {\n initialHasValue = Boolean(unionProps.value);\n } else {\n initialHasValue = Boolean(unionProps.defaultValue);\n }\n\n const [focused, setFocused] = useState(false);\n const [hasValue, setHasValue] = useState(initialHasValue);\n\n const labelFloated = hasValue || focused;\n\n const innerRef = useRef<HTMLInputElement>(null);\n const ref = inputRef ?? innerRef;\n\n const { root, container, input, buttonSection, clearButton, iconSeparator } = generateClasses({\n disabled,\n hasValue,\n hideClear,\n error,\n });\n\n const handleFocus = () => {\n setFocused(true);\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = () => {\n setFocused(false);\n if (onBlur) {\n onBlur();\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.currentTarget.value;\n unionProps.onChange?.(newValue);\n if (hasValue !== Boolean(newValue)) {\n setHasValue(Boolean(newValue));\n }\n };\n\n const clearLabel = \"Eingabe löschen\";\n const handleClear = () => {\n if (unionProps.value) {\n unionProps.onChange(\"\");\n } else {\n if (ref.current) {\n ref.current.value = \"\";\n }\n }\n setHasValue(false);\n ref.current?.focus();\n };\n\n const showSeparator = buttonIcon && !hideClear;\n const showButtonSection = !hideClear || buttonIcon;\n\n let ariaDescribedBy;\n if (helperText) {\n ariaDescribedBy = helperTextId;\n }\n if (!disabled && error && errorText) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n }\n if (describedBy) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + describedBy : describedBy;\n }\n\n return (\n // The data-attribute is used to reliably select this element to fix a bug with autofill in Chrome,\n // where labels wouldn't float to the top when autofilling on initial page load.\n // We need to ensure this CSS is present early on in the rendering process,\n // so we can't keep it alongside our component and must move it to global CSS, hence the data-attribute.\n <div className={root()} data-fix-chrome-page-load-autofill>\n <InputWrapper\n label={label}\n id={calculatedId}\n labelFloated={labelFloated}\n disabled={disabled}\n required={required}\n helperText={helperText}\n helperTextId={helperTextId}\n error={error}\n errorText={errorText}\n errorTextId={errorTextId}\n componentName={componentName}\n >\n <div className={container()}>\n <input\n {...unionProps}\n type={type}\n className={input()}\n id={calculatedId}\n name={name}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n inputMode={inputMode}\n pattern={pattern}\n autoComplete={autoComplete}\n autoCorrect={autoCorrect}\n spellCheck={spellCheck}\n ref={ref}\n minLength={minLength}\n maxLength={maxLength}\n required={required}\n aria-describedby={ariaDescribedBy}\n aria-invalid={error ? \"true\" : undefined}\n disabled={disabled}\n data-bpds-hide-clear={hideClear}\n />\n {showButtonSection && (\n <div className={buttonSection()}>\n {!hideClear && (\n <div className={clearButton()}>\n <IconButton variant=\"tertiary\" size=\"small\" type=\"button\" icon=\"closer\" onClick={handleClear} label={clearLabel} />\n </div>\n )}\n {showSeparator && <span className={iconSeparator()}></span>}\n {buttonIcon && (\n <IconButton\n variant=\"tertiary\"\n size=\"small\"\n type={iconButtonType}\n icon={buttonIcon}\n onClick={onIconButtonClick}\n label={iconButtonLabel!}\n disabled={disabled}\n />\n )}\n </div>\n )}\n </div>\n </InputWrapper>\n </div>\n );\n};\n\nexport default BaseInputField;\n"],"mappings":";;;;;;AAMA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,WAAW;EACX,OAAO;EACP,eAAe;EACf,aAAa;EACb,eAAe;CACjB;CACA,UAAU;EACR,UAAU;GACR,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;EACA,WAAW,EACT,MAAM,EACJ,OAAO,MACT,EACF;EACA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB,CAChB;EACE,UAAU;EACV,UAAU;EACV,OAAO;GACL,aAAa;GACb,eAAe;EACjB;CACF,GACA;EACE,UAAU;EACV,OAAO;EACP,OAAO,EAIL,OAAO,mEACT;CACF,CACF;AACF,CAAC,GA+DK,KAAkB,EACtB,SACA,YACA,WACA,cACA,YACA,aACA,UACA,SACA,OACA,gBAAa,IACb,eAAY,IACZ,cAAW,IACX,cAAW,IACX,WAAQ,IACR,cACA,aACA,iBACA,gBACA,eACA,eACA,cACA,eAAY,IACZ,gBACA,eACA,oBAAiB,UACjB,sBACA,oBACA,kBACA,GAAG,QACQ;CACX,IAAM,IAAc,EAAM,GACpB,IAAe,KAAM,GACrB,IAAe,EAAM,GACrB,IAAc,EAAM,GACtB;CACJ,AACE,IADE,EAAW,UAAU,KAAA,IAGL,EAAQ,EAAW,eAFnB,EAAQ,EAAW;CAKvC,IAAM,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,CAAC,GAAU,KAAe,EAAS,CAAe,GAElD,IAAe,KAAY,GAE3B,IAAW,EAAyB,IAAI,GACxC,IAAM,KAAY,GAElB,EAAE,SAAM,cAAW,UAAO,kBAAe,gBAAa,qBAAkB,EAAgB;EAC5F;EACA;EACA;EACA;CACF,CAAC,GAEK,WAAoB;EAExB,AADA,EAAW,EAAI,GACX,KACF,EAAQ;CAEZ,GAEM,WAAmB;EAEvB,AADA,EAAW,EAAK,GACZ,KACF,EAAO;CAEX,GAEM,MAAgB,MAA2C;EAC/D,IAAM,IAAW,EAAE,cAAc;EAEjC,AADA,EAAW,WAAW,CAAQ,GAC1B,MAAa,EAAQ,KACvB,EAAY,EAAQ,CAAS;CAEjC,GAGM,WAAoB;EASxB,AARI,EAAW,QACb,EAAW,SAAS,EAAE,IAElB,EAAI,YACN,EAAI,QAAQ,QAAQ,KAGxB,EAAY,EAAK,GACjB,EAAI,SAAS,MAAM;CACrB,GAEM,KAAgB,KAAc,CAAC,GAC/B,KAAoB,CAAC,KAAa,GAEpC;CAWJ,OAVI,MACF,IAAkB,IAEhB,CAAC,KAAY,KAAS,MACxB,IAAkB,IAAkB,IAAkB,MAAM,IAAc,IAExE,MACF,IAAkB,IAAkB,IAAkB,MAAM,IAAc,IAQ1E,kBAAC,OAAD;EAAK,WAAW,EAAK;EAAG,sCAAA;EACtB,UAAA,kBAAC,GAAD;GACS;GACP,IAAI;GACU;GACJ;GACA;GACE;GACE;GACP;GACI;GACE;GACE;GAEf,UAAA,kBAAC,OAAD;IAAK,WAAW,EAAU;IAA1B,UAAA,CACE,kBAAC,SAAD;KACE,GAAI;KACE;KACN,WAAW,EAAM;KACjB,IAAI;KACE;KACN,UAAU;KACV,SAAS;KACT,QAAQ;KACG;KACF;KACE;KACF;KACK;KACD;KACD;KACP;KACM;KACA;KACD;KACV,oBAAkB;KAClB,gBAAc,IAAQ,SAAS,KAAA;KACrB;KACV,wBAAsB;IACvB,CAAA,GACA,MACC,kBAAC,OAAD;KAAK,WAAW,EAAc;KAA9B,UAAA;MACG,CAAC,KACA,kBAAC,OAAD;OAAK,WAAW,EAAY;OAC1B,UAAA,kBAAC,GAAD;QAAY,SAAQ;QAAW,MAAK;QAAQ,MAAK;QAAS,MAAK;QAAS,SAAS;QAAa,OAAO;OAAa,CAAA;MAC/G,CAAA;MAEN,MAAiB,kBAAC,QAAD,EAAM,WAAW,EAAc,EAAS,CAAA;MACzD,KACC,kBAAC,GAAD;OACE,SAAQ;OACR,MAAK;OACL,MAAM;OACN,MAAM;OACN,SAAS;OACT,OAAO;OACG;MACX,CAAA;KAEA;IAEJ,CAAA,CAAA;;EACO,CAAA;CACX,CAAA;AAET"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../src/BaseInputField.tsx"],"sourcesContent":["import React, { HTMLInputAutoCompleteAttribute, RefObject, useId, useRef, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { InputWrapper } from \"@bonprix-ds/internal-components\";\nimport type { IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight w-full group\",\n container: \"input flex gap-3 px-3 py-[0.6875rem]\",\n input: \"w-full flex-grow outline-none text-ellipsis text-inherit typography-input-text bg-transparent\",\n buttonSection: \"flex gap-2 items-center\",\n clearButton: \"invisible\",\n iconSeparator: \"invisible w-0.25 h-5 bg-clr-on-bg-low\",\n },\n variants: {\n hasValue: {\n true: \"\",\n false: \"\",\n },\n disabled: {\n true: \"\",\n false: \"\",\n },\n hideClear: {\n true: {\n input: \"h-6\", // preserve 24px height without buttons\n },\n },\n error: {\n true: \"\",\n false: \"\",\n },\n },\n compoundVariants: [\n {\n hasValue: true,\n disabled: false,\n class: {\n clearButton: \"group-hover:visible group-focus-within:visible\",\n iconSeparator: \"group-hover:visible group-focus-within:visible\",\n },\n },\n {\n disabled: false,\n error: true,\n class: {\n // This makes sure the calendar icon is black-ish in Firefox even when the value is marked red.\n // Without this, the icon in Firefox would take the red color as well, which is inconsistent with Chrome and not what we want design-wise.\n // This is a known limitation within Firefox, and we do our best to make the native inputs align, s.: https://bugzilla.mozilla.org/show_bug.cgi?id=1817839\n input: \"[-webkit-text-fill-color:var(--bpds-color-fg-error)] text-clr-primary\",\n },\n },\n ],\n});\n\nexport interface HTMLInputAttributes {\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode\" target=\"_blank\">HTML input mode attribute.</a> */\n inputMode?: HTMLInputInputModeAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern\" target=\"_blank\">HTML pattern attribute.</a> */\n pattern?: HTMLInputPatternAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete\" target=\"_blank\">HTML autocomplete attribute.</a> */\n autoComplete?: HTMLInputAutoCompleteAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect\" target=\"_blank\">HTML autocorrect attribute.</a> */\n autoCorrect?: HTMLInputAutoCorrectAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck\" target=\"_blank\">HTML spellcheck attribute.</a> */\n spellCheck?: HTMLInputSpellCheckAttribute;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/minlength\" target=\"_blank\">HTML minLength attribute.</a> */\n minLength?: number;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength\" target=\"_blank\">HTML maxlength attribute.</a> */\n maxLength?: number;\n /** Callback, that is triggered on key down. */\n onKeyDown?: () => void;\n /** Callback that is triggered on key up. */\n onKeyUp?: () => void;\n}\n\ntype HTMLInputInputModeAttribute = \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\ntype HTMLInputPatternAttribute = HTMLInputElement[\"pattern\"];\ntype HTMLInputAutoCorrectAttribute = \"on\" | \"off\";\ntype HTMLInputSpellCheckAttribute = HTMLInputElement[\"spellcheck\"];\n\ninterface BaseProps extends HTMLInputAttributes {\n type: \"text\" | \"password\" | \"email\";\n onFocus?: () => void;\n onBlur?: () => void;\n inputRef?: RefObject<HTMLInputElement | null>;\n label?: string;\n name?: string;\n id?: string;\n helperText?: string;\n errorText?: string;\n disabled?: boolean;\n required?: boolean;\n error?: boolean;\n hideClear?: boolean;\n describedBy?: string;\n buttonIcon?: IconType;\n onIconButtonClick?: () => void;\n iconButtonType?: \"button\" | \"submit\";\n iconButtonLabel?: string;\n componentName: \"password-field\" | \"text-field\" | \"search-field\" | \"email-field\";\n}\n\ninterface ControlledInputProps extends BaseProps {\n value: string;\n onChange: (value: string) => void;\n}\n\ninterface UncontrolledInputProps extends BaseProps {\n value?: never;\n defaultValue: string;\n onChange?: (value: string) => void;\n}\n\ntype Props = ControlledInputProps | UncontrolledInputProps;\n\nconst BaseInputField = ({\n type,\n onFocus,\n onBlur,\n onKeyDown,\n onKeyUp,\n inputRef,\n label,\n name,\n id,\n helperText = \"\",\n errorText = \"\",\n disabled = false,\n required = false,\n error = false,\n inputMode,\n pattern,\n autoComplete,\n autoCorrect,\n spellCheck,\n minLength,\n maxLength,\n hideClear = false,\n describedBy,\n buttonIcon,\n iconButtonType = \"button\",\n onIconButtonClick,\n iconButtonLabel,\n componentName,\n ...unionProps\n}: Props) => {\n const generatedId = useId();\n const calculatedId = id ?? generatedId;\n const helperTextId = useId();\n const errorTextId = useId();\n let initialHasValue: boolean;\n if (unionProps.value !== undefined) {\n initialHasValue = Boolean(unionProps.value);\n } else {\n initialHasValue = Boolean(unionProps.defaultValue);\n }\n\n const [focused, setFocused] = useState(false);\n const [hasValue, setHasValue] = useState(initialHasValue);\n\n const labelFloated = hasValue || focused;\n\n const innerRef = useRef<HTMLInputElement>(null);\n const ref = inputRef ?? innerRef;\n\n const { root, container, input, buttonSection, clearButton, iconSeparator } = generateClasses({\n disabled,\n hasValue,\n hideClear,\n error,\n });\n\n const handleFocus = () => {\n setFocused(true);\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = () => {\n setFocused(false);\n if (onBlur) {\n onBlur();\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.currentTarget.value;\n unionProps.onChange?.(newValue);\n if (hasValue !== Boolean(newValue)) {\n setHasValue(Boolean(newValue));\n }\n };\n\n const clearLabel = \"Eingabe löschen\";\n const handleClear = () => {\n if (unionProps.value) {\n unionProps.onChange(\"\");\n } else {\n if (ref.current) {\n ref.current.value = \"\";\n }\n }\n setHasValue(false);\n ref.current?.focus();\n };\n\n const showSeparator = buttonIcon && !hideClear;\n const showButtonSection = !hideClear || buttonIcon;\n\n let ariaDescribedBy;\n if (helperText) {\n ariaDescribedBy = helperTextId;\n }\n if (!disabled && error && errorText) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n }\n if (describedBy) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + describedBy : describedBy;\n }\n\n return (\n // The data-attribute is used to reliably select this element to fix a bug with autofill in Chrome,\n // where labels wouldn't float to the top when autofilling on initial page load.\n // We need to ensure this CSS is present early on in the rendering process,\n // so we can't keep it alongside our component and must move it to global CSS, hence the data-attribute.\n <div className={root()} data-fix-chrome-page-load-autofill>\n <InputWrapper\n label={label}\n id={calculatedId}\n labelFloated={labelFloated}\n disabled={disabled}\n required={required}\n helperText={helperText}\n helperTextId={helperTextId}\n error={error}\n errorText={errorText}\n errorTextId={errorTextId}\n componentName={componentName}\n >\n <div className={container()}>\n <input\n {...unionProps}\n type={type}\n className={input()}\n id={calculatedId}\n name={name}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n inputMode={inputMode}\n pattern={pattern}\n autoComplete={autoComplete}\n autoCorrect={autoCorrect}\n spellCheck={spellCheck}\n ref={ref}\n minLength={minLength}\n maxLength={maxLength}\n required={required}\n aria-describedby={ariaDescribedBy}\n aria-invalid={error ? \"true\" : undefined}\n disabled={disabled}\n data-bpds-hide-clear={hideClear}\n />\n {showButtonSection && (\n <div className={buttonSection()}>\n {!hideClear && (\n <div className={clearButton()}>\n <IconButton variant=\"tertiary\" size=\"small\" type=\"button\" icon=\"closer\" onClick={handleClear} label={clearLabel} />\n </div>\n )}\n {showSeparator && <span className={iconSeparator()}></span>}\n {buttonIcon && (\n <IconButton\n variant=\"tertiary\"\n size=\"small\"\n type={iconButtonType}\n icon={buttonIcon}\n onClick={onIconButtonClick}\n label={iconButtonLabel!}\n disabled={disabled}\n />\n )}\n </div>\n )}\n </div>\n </InputWrapper>\n </div>\n );\n};\n\nexport default BaseInputField;\n"],"mappings":"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"}
package/dist/src/BaseInputField.d.ts ADDED
@@ -0,0 +1,59 @@
1
+ import React, { HTMLInputAutoCompleteAttribute, RefObject } from "react";
2
+ import type { IconType } from "@bonprix-ds/react-icon";
3
+ export interface HTMLInputAttributes {
4
+ /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode" target="_blank">HTML input mode attribute.</a> */
5
+ inputMode?: HTMLInputInputModeAttribute;
6
+ /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern" target="_blank">HTML pattern attribute.</a> */
7
+ pattern?: HTMLInputPatternAttribute;
8
+ /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete" target="_blank">HTML autocomplete attribute.</a> */
9
+ autoComplete?: HTMLInputAutoCompleteAttribute;
10
+ /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect" target="_blank">HTML autocorrect attribute.</a> */
11
+ autoCorrect?: HTMLInputAutoCorrectAttribute;
12
+ /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck" target="_blank">HTML spellcheck attribute.</a> */
13
+ spellCheck?: HTMLInputSpellCheckAttribute;
14
+ /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/minlength" target="_blank">HTML minLength attribute.</a> */
15
+ minLength?: number;
16
+ /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength" target="_blank">HTML maxlength attribute.</a> */
17
+ maxLength?: number;
18
+ /** Callback, that is triggered on key down. */
19
+ onKeyDown?: () => void;
20
+ /** Callback that is triggered on key up. */
21
+ onKeyUp?: () => void;
22
+ }
23
+ type HTMLInputInputModeAttribute = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
24
+ type HTMLInputPatternAttribute = HTMLInputElement["pattern"];
25
+ type HTMLInputAutoCorrectAttribute = "on" | "off";
26
+ type HTMLInputSpellCheckAttribute = HTMLInputElement["spellcheck"];
27
+ interface BaseProps extends HTMLInputAttributes {
28
+ type: "text" | "password" | "email";
29
+ onFocus?: () => void;
30
+ onBlur?: () => void;
31
+ inputRef?: RefObject<HTMLInputElement | null>;
32
+ label?: string;
33
+ name?: string;
34
+ id?: string;
35
+ helperText?: string;
36
+ errorText?: string;
37
+ disabled?: boolean;
38
+ required?: boolean;
39
+ error?: boolean;
40
+ hideClear?: boolean;
41
+ describedBy?: string;
42
+ buttonIcon?: IconType;
43
+ onIconButtonClick?: () => void;
44
+ iconButtonType?: "button" | "submit";
45
+ iconButtonLabel?: string;
46
+ componentName: "password-field" | "text-field" | "search-field" | "email-field";
47
+ }
48
+ interface ControlledInputProps extends BaseProps {
49
+ value: string;
50
+ onChange: (value: string) => void;
51
+ }
52
+ interface UncontrolledInputProps extends BaseProps {
53
+ value?: never;
54
+ defaultValue: string;
55
+ onChange?: (value: string) => void;
56
+ }
57
+ type Props = ControlledInputProps | UncontrolledInputProps;
58
+ declare const BaseInputField: ({ type, onFocus, onBlur, onKeyDown, onKeyUp, inputRef, label, name, id, helperText, errorText, disabled, required, error, inputMode, pattern, autoComplete, autoCorrect, spellCheck, minLength, maxLength, hideClear, describedBy, buttonIcon, iconButtonType, onIconButtonClick, iconButtonLabel, componentName, ...unionProps }: Props) => React.JSX.Element;
59
+ export default BaseInputField;
package/package.json CHANGED
@@ -1,14 +1,25 @@
1
1
  {
2
2
  "name": "@bonprix-ds/react-base-input-field",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "BaseInputField component, implemented in React, for the Bonprix Design System.",
5
- "type": "module",
6
- "publishConfig": {
7
- "access": "public",
8
- "provenance": true
5
+ "keywords": [],
6
+ "license": "UNLICENSED",
7
+ "author": "",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/bonprix/design-system.git",
11
+ "directory": "packages/react/base-input-field"
9
12
  },
10
- "module": "./dist/index.js",
13
+ "files": [
14
+ "dist",
15
+ "!dist/tsconfig.tsbuildinfo",
16
+ "!dist/vite.config.d.ts",
17
+ "!dist/**/*.test.d.ts"
18
+ ],
19
+ "type": "module",
11
20
  "sideEffects": false,
21
+ "module": "./dist/index.js",
22
+ "types": "./dist/index.d.ts",
12
23
  "exports": {
13
24
  ".": {
14
25
  "import": "./dist/index.js",
@@ -16,36 +27,26 @@
16
27
  "default": "./dist/index.js"
17
28
  }
18
29
  },
19
- "types": "./dist/index.d.ts",
20
- "files": [
21
- "dist"
22
- ],
23
- "keywords": [],
24
- "author": "",
25
- "license": "UNLICENSED",
26
- "repository": {
27
- "type": "git",
28
- "url": "git+https://github.com/bonprix/design-system.git",
29
- "directory": "packages/react/base-input-field"
30
+ "publishConfig": {
31
+ "access": "public",
32
+ "provenance": true
30
33
  },
31
34
  "dependencies": {
32
- "@bonprix-ds/internal-components": "0.2.0",
33
- "@bonprix-ds/react-icon": "1.2.0",
34
- "@bonprix-ds/react-icon-button": "1.2.0",
35
+ "@bonprix-ds/internal-components": "0.2.1",
36
+ "@bonprix-ds/react-icon": "1.2.1",
37
+ "@bonprix-ds/react-icon-button": "1.2.1",
35
38
  "@bonprix-ds/utils": "0.2.2"
36
39
  },
37
- "peerDependencies": {
38
- "react": "^19.0.0",
39
- "react-dom": "^19.0.0",
40
- "tailwind-variants": "0.3.1"
41
- },
42
40
  "devDependencies": {
43
- "vite": "8.2.2",
44
- "@types/react": "19.2.18",
41
+ "@types/react": "19.3.0",
45
42
  "@vitejs/plugin-react": "6.1.1",
46
43
  "rollup-preserve-directives": "1.1.3",
47
- "unplugin-dts": "1.1.0",
48
- "@microsoft/api-extractor": "7.59.1"
44
+ "vite": "8.3.0"
45
+ },
46
+ "peerDependencies": {
47
+ "react": "^19.3.0",
48
+ "react-dom": "^19.3.0",
49
+ "tailwind-variants": "0.3.1"
49
50
  },
50
51
  "scripts": {
51
52
  "build": "vite build"