🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@fremtind/jkl-text-input-react

Package Overview
Dependencies
Maintainers
0
Versions
358
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fremtind/jkl-text-input-react - npm Package Compare versions

Comparing version

15.2.5
to
15.2.6

175

build/cjs/autosuggest/BaseAutosuggest.js

@@ -66,3 +66,5 @@ "use strict";

}) {
const uid = (0, import_jkl_react_hooks.useId)(inputId || "jkl-text-input", { generateSuffix: !inputId });
const uid = (0, import_jkl_react_hooks.useId)(inputId || "jkl-text-input", {
generateSuffix: !inputId
});
const lid = (0, import_jkl_react_hooks.useId)(labelId || "jkl-label", { generateSuffix: !labelId });

@@ -73,84 +75,101 @@ const customLabelProps = {

};
return /* @__PURE__ */ import_react.default.createElement(import_downshift.default, { ...downshiftProps, ...customLabelProps, itemToString }, ({
getInputProps,
getToggleButtonProps,
getItemProps,
getLabelProps,
getMenuProps,
getRootProps,
selectedItem,
isOpen,
highlightedIndex,
clearSelection
}) => {
return /* @__PURE__ */ import_react.default.createElement(
import_jkl_input_group_react.InputGroup,
{
...getRootProps(),
label,
className: (0, import_classnames.default)("jkl-autosuggest", className),
density,
labelProps: {
variant,
...labelProps,
...getLabelProps({
id: lid
})
},
supportLabelProps,
tooltipProps,
errorLabel,
helpLabel,
render: (inputProps) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, leadText && /* @__PURE__ */ import_react.default.createElement(
"p",
{
className: (0, import_classnames.default)("jkl-spacing-l--bottom", {
"jkl-body": density !== "compact",
"jkl-small": density === "compact"
return /* @__PURE__ */ import_react.default.createElement(
import_downshift.default,
{
...downshiftProps,
...customLabelProps,
itemToString
},
({
getInputProps,
getToggleButtonProps,
getItemProps,
getLabelProps,
getMenuProps,
getRootProps,
selectedItem,
isOpen,
highlightedIndex,
clearSelection
}) => {
return /* @__PURE__ */ import_react.default.createElement(
import_jkl_input_group_react.InputGroup,
{
...getRootProps(),
label,
className: (0, import_classnames.default)("jkl-autosuggest", className),
density,
labelProps: {
variant,
...labelProps,
...getLabelProps({
id: lid
})
},
leadText
), /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-text-input-wrapper", "data-invalid": !!errorLabel }, /* @__PURE__ */ import_react.default.createElement(
"input",
{
...inputProps,
...getInputProps({
id: inputProps.id,
placeholder,
className: "jkl-text-input__input",
onKeyDown: (e) => {
if (e.keyCode === KEY_ENTER && !isOpen) {
onConfirm();
}
supportLabelProps,
tooltipProps,
errorLabel,
helpLabel,
render: (inputProps) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, leadText && /* @__PURE__ */ import_react.default.createElement(
"p",
{
className: (0, import_classnames.default)("jkl-spacing-l--bottom", {
"jkl-body": density !== "compact",
"jkl-small": density === "compact"
})
},
leadText
), /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: "jkl-text-input-wrapper",
"data-invalid": !!errorLabel
},
/* @__PURE__ */ import_react.default.createElement(
"input",
{
...inputProps,
...getInputProps({
id: inputProps.id,
placeholder,
className: "jkl-text-input__input",
onKeyDown: (e) => {
if (e.keyCode === KEY_ENTER && !isOpen) {
onConfirm();
}
}
}),
"data-testid": "autosuggest__input"
}
}),
"data-testid": "autosuggest__input"
}
), showDropdownControllerButton && /* @__PURE__ */ import_react.default.createElement(
import_ControllerButton.default,
{
...getToggleButtonProps(),
hasSelectedItem: !!selectedItem,
clearSelection
}
), isOpen && /* @__PURE__ */ import_react.default.createElement(
import_Menu.default,
{
downshiftProps: {
getMenuProps,
getItemProps
},
highlightedIndex,
items,
itemToString,
noHitsMessage,
maxNumberOfHits,
noHits
}
)))
}
);
});
),
showDropdownControllerButton && /* @__PURE__ */ import_react.default.createElement(
import_ControllerButton.default,
{
...getToggleButtonProps(),
hasSelectedItem: !!selectedItem,
clearSelection
}
),
isOpen && /* @__PURE__ */ import_react.default.createElement(
import_Menu.default,
{
downshiftProps: {
getMenuProps,
getItemProps
},
highlightedIndex,
items,
itemToString,
noHitsMessage,
maxNumberOfHits,
noHits
}
)
))
}
);
}
);
}
var BaseAutosuggest_default = BaseAutosuggest;
//# sourceMappingURL=BaseAutosuggest.js.map

7

build/cjs/autosuggest/ControllerButton.js

@@ -37,3 +37,8 @@ "use strict";

var import_react = __toESM(require("react"));
const ControllerButton = ({ hasSelectedItem, clearSelection, onClick, ...downshiftProps }) => /* @__PURE__ */ import_react.default.createElement(
const ControllerButton = ({
hasSelectedItem,
clearSelection,
onClick,
...downshiftProps
}) => /* @__PURE__ */ import_react.default.createElement(
import_jkl_icon_button_react.IconButton,

@@ -40,0 +45,0 @@ {

9

build/cjs/autosuggest/Menu.js

@@ -50,3 +50,10 @@ "use strict";

const itemList = visibleItems.length === 0 && noHits ? noHits.items : visibleItems;
return /* @__PURE__ */ import_react.default.createElement("div", { "data-testid": "autosuggest__menu", className: "jkl-autosuggest__menu" }, (noHitsMessage || noHits) && visibleItems.length === 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-autosuggest__no-hits-message", "aria-live": "polite" }, noHitsMessage || (noHits == null ? void 0 : noHits.text)), itemList.length > 0 && /* @__PURE__ */ import_react.default.createElement(
return /* @__PURE__ */ import_react.default.createElement("div", { "data-testid": "autosuggest__menu", className: "jkl-autosuggest__menu" }, (noHitsMessage || noHits) && visibleItems.length === 0 && /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: "jkl-autosuggest__no-hits-message",
"aria-live": "polite"
},
noHitsMessage || (noHits == null ? void 0 : noHits.text)
), itemList.length > 0 && /* @__PURE__ */ import_react.default.createElement(
"ul",

@@ -53,0 +60,0 @@ {

201

build/cjs/BaseTextArea.js

@@ -35,105 +35,116 @@ "use strict";

var import_react = __toESM(require("react"));
const BaseTextArea = (0, import_react.forwardRef)((props, ref) => {
const {
autoExpand,
counter,
onBlur,
onFocus,
rows = 7,
placeholder = " ",
// This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.
startOpen,
style,
value,
"aria-invalid": ariaInvalid,
onChange,
...rest
} = props;
const [counterCurrent, setCounterCurrent] = (0, import_react.useState)(() => {
if (typeof value === "undefined") {
return 0;
} else if (typeof value === "number") {
return String(value).length;
} else {
return value.length;
}
});
const [textAreaFocused, setTextAreaFocused] = (0, import_react.useState)(false);
const internalRef = (0, import_react.useRef)(null);
const textAreaRef = ref || internalRef;
(0, import_react.useEffect)(() => {
const textAreaElement = textAreaRef.current;
if (textAreaElement) {
if (!autoExpand) {
textAreaElement.style.height = "";
return;
}
if (textAreaFocused || value) {
textAreaElement.style.height = "auto";
textAreaElement.style.height = "".concat(textAreaElement.scrollHeight, "px");
const BaseTextArea = (0, import_react.forwardRef)(
(props, ref) => {
const {
autoExpand,
counter,
onBlur,
onFocus,
rows = 7,
placeholder = " ",
// This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.
startOpen,
style,
value,
"aria-invalid": ariaInvalid,
onChange,
...rest
} = props;
const [counterCurrent, setCounterCurrent] = (0, import_react.useState)(() => {
if (typeof value === "undefined") {
return 0;
} else if (typeof value === "number") {
return String(value).length;
} else {
textAreaElement.style.height = "";
return value.length;
}
});
const [textAreaFocused, setTextAreaFocused] = (0, import_react.useState)(false);
const internalRef = (0, import_react.useRef)(null);
const textAreaRef = ref || internalRef;
(0, import_react.useEffect)(() => {
const textAreaElement = textAreaRef.current;
if (textAreaElement) {
if (!autoExpand) {
textAreaElement.style.height = "";
return;
}
if (textAreaFocused || value) {
textAreaElement.style.height = "auto";
textAreaElement.style.height = "".concat(textAreaElement.scrollHeight, "px");
} else {
textAreaElement.style.height = "";
}
}
}, [autoExpand, textAreaRef, value, textAreaFocused]);
function handleOnFocus(e) {
setTextAreaFocused(true);
if (onFocus) {
onFocus(e);
}
}
}, [autoExpand, textAreaRef, value, textAreaFocused]);
function handleOnFocus(e) {
setTextAreaFocused(true);
if (onFocus) {
onFocus(e);
function handleOnBlur(e) {
setTextAreaFocused(false);
if (onBlur) {
onBlur(e);
}
}
}
function handleOnBlur(e) {
setTextAreaFocused(false);
if (onBlur) {
onBlur(e);
function handleOnChange(e) {
setCounterCurrent(e.target.value.length);
if (onChange) {
onChange(e);
}
}
}
function handleOnChange(e) {
setCounterCurrent(e.target.value.length);
if (onChange) {
onChange(e);
const counterTotal = (counter == null ? void 0 : counter.maxLength) || 0;
const progressCurrent = counterTotal - counterCurrent;
function calculatePercentage(current, total) {
if (current <= 0) {
return 0;
}
return total === 0 ? 0 : current * 100 / total;
}
const counterLabel = counter && counterCurrent > counterTotal ? "Du har skrevet ".concat(counterCurrent - counterTotal, " tegn for mye") : void 0;
const invalid = Boolean(ariaInvalid || counterLabel);
const overflowStyle = {
overflowX: autoExpand ? "hidden" : void 0
// Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700
};
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: "jkl-text-input-wrapper",
"data-invalid": invalid,
"data-has-content": counterCurrent > 0
},
/* @__PURE__ */ import_react.default.createElement(
"textarea",
{
"aria-invalid": invalid,
className: "jkl-text-area__text-area jkl-text-area__text-area--".concat(rows, "-rows"),
onBlur: handleOnBlur,
onFocus: handleOnFocus,
onChange: handleOnChange,
ref: textAreaRef,
style: { ...style, ...overflowStyle },
placeholder,
value,
...rest
}
),
counter && /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-text-area__counter", "aria-hidden": "true" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-text-area__counter-count" }, counterCurrent, "\xA0/\xA0", counterTotal), !counter.hideProgress && /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: "jkl-text-area__counter-progress",
style: {
["--progress-width"]: "".concat(calculatePercentage(
progressCurrent,
counterTotal
), "%")
}
}
))
);
}
const counterTotal = (counter == null ? void 0 : counter.maxLength) || 0;
const progressCurrent = counterTotal - counterCurrent;
function calculatePercentage(current, total) {
if (current <= 0) {
return 0;
}
return total === 0 ? 0 : current * 100 / total;
}
const counterLabel = counter && counterCurrent > counterTotal ? "Du har skrevet ".concat(counterCurrent - counterTotal, " tegn for mye") : void 0;
const invalid = Boolean(ariaInvalid || counterLabel);
const overflowStyle = {
overflowX: autoExpand ? "hidden" : void 0
// Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700
};
return /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-text-input-wrapper", "data-invalid": invalid, "data-has-content": counterCurrent > 0 }, /* @__PURE__ */ import_react.default.createElement(
"textarea",
{
"aria-invalid": invalid,
className: "jkl-text-area__text-area jkl-text-area__text-area--".concat(rows, "-rows"),
onBlur: handleOnBlur,
onFocus: handleOnFocus,
onChange: handleOnChange,
ref: textAreaRef,
style: { ...style, ...overflowStyle },
placeholder,
value,
...rest
}
), counter && /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-text-area__counter", "aria-hidden": "true" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-text-area__counter-count" }, counterCurrent, "\xA0/\xA0", counterTotal), !counter.hideProgress && /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: "jkl-text-area__counter-progress",
style: {
["--progress-width"]: "".concat(calculatePercentage(
progressCurrent,
counterTotal
), "%")
}
}
)));
});
);
BaseTextArea.displayName = "BaseTextArea";
//# sourceMappingURL=BaseTextArea.js.map

107

build/cjs/BaseTextInput.js

@@ -48,56 +48,61 @@ "use strict";

}
const BaseTextInput = (0, import_react.forwardRef)((props, ref) => {
const {
action,
align = "left",
"aria-invalid": ariaInvalid,
className = "",
density,
maxLength,
style,
type = "text",
unit,
width,
actionButton,
...rest
} = props;
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
className: "jkl-text-input-wrapper",
"data-invalid": ariaInvalid,
style: { ...style, ...getWidthAsStyle(width, maxLength) }
},
/* @__PURE__ */ import_react.default.createElement(
"input",
const BaseTextInput = (0, import_react.forwardRef)(
(props, ref) => {
const {
action,
align = "left",
"aria-invalid": ariaInvalid,
className = "",
density,
maxLength,
style,
type = "text",
unit,
width,
actionButton,
...rest
} = props;
return /* @__PURE__ */ import_react.default.createElement(
"div",
{
"aria-invalid": ariaInvalid,
ref,
className: (0, import_classnames.default)("jkl-text-input__input", className, {
"jkl-text-input__input--align-right": align === "right"
}),
maxLength,
type,
...rest
}
),
unit && /* @__PURE__ */ import_react.default.createElement("span", { className: "jkl-text-input__unit" }, unit),
!action && actionButton && actionButton,
action && !actionButton && /* @__PURE__ */ import_react.default.createElement(
import_jkl_icon_button_react.IconButton,
{
density,
className: (0, import_classnames.default)("jkl-text-input-action-button", action.className),
title: action.label,
onClick: action.onClick,
onFocus: action.onFocus,
onBlur: action.onBlur,
ref: action.buttonRef,
type: action.type || "button"
className: "jkl-text-input-wrapper",
"data-invalid": ariaInvalid,
style: { ...style, ...getWidthAsStyle(width, maxLength) }
},
action.icon
)
);
});
/* @__PURE__ */ import_react.default.createElement(
"input",
{
"aria-invalid": ariaInvalid,
ref,
className: (0, import_classnames.default)("jkl-text-input__input", className, {
"jkl-text-input__input--align-right": align === "right"
}),
maxLength,
type,
...rest
}
),
unit && /* @__PURE__ */ import_react.default.createElement("span", { className: "jkl-text-input__unit" }, unit),
!action && actionButton && actionButton,
action && !actionButton && /* @__PURE__ */ import_react.default.createElement(
import_jkl_icon_button_react.IconButton,
{
density,
className: (0, import_classnames.default)(
"jkl-text-input-action-button",
action.className
),
title: action.label,
onClick: action.onClick,
onFocus: action.onFocus,
onBlur: action.onBlur,
ref: action.buttonRef,
type: action.type || "button"
},
action.icon
)
);
}
);
BaseTextInput.displayName = "BaseInputField";
//# sourceMappingURL=BaseTextInput.js.map

82

build/cjs/TextArea.js

@@ -38,43 +38,45 @@ "use strict";

var import_BaseTextArea = require("./BaseTextArea");
const TextArea = (0, import_react.forwardRef)((props, ref) => {
const {
autoExpand,
className,
counter,
density,
errorLabel,
helpLabel,
inline,
label,
labelProps,
startOpen,
supportLabelProps,
tooltipProps,
...rest
} = props;
const inputGroupProps = {
label,
density,
errorLabel,
helpLabel,
labelProps,
inline,
supportLabelProps,
tooltipProps
};
const textAreaProps = { autoExpand, counter, startOpen };
return /* @__PURE__ */ import_react.default.createElement(
import_jkl_input_group_react.InputGroup,
{
className: (0, import_classnames.default)("jkl-text-area", className, {
"jkl-text-area--start-open": startOpen,
"jkl-text-area--auto-expand": autoExpand
}),
"data-testid": "jkl-text-area",
...inputGroupProps
},
/* @__PURE__ */ import_react.default.createElement(import_BaseTextArea.BaseTextArea, { ref, ...rest, ...textAreaProps })
);
});
const TextArea = (0, import_react.forwardRef)(
(props, ref) => {
const {
autoExpand,
className,
counter,
density,
errorLabel,
helpLabel,
inline,
label,
labelProps,
startOpen,
supportLabelProps,
tooltipProps,
...rest
} = props;
const inputGroupProps = {
label,
density,
errorLabel,
helpLabel,
labelProps,
inline,
supportLabelProps,
tooltipProps
};
const textAreaProps = { autoExpand, counter, startOpen };
return /* @__PURE__ */ import_react.default.createElement(
import_jkl_input_group_react.InputGroup,
{
className: (0, import_classnames.default)("jkl-text-area", className, {
"jkl-text-area--start-open": startOpen,
"jkl-text-area--auto-expand": autoExpand
}),
"data-testid": "jkl-text-area",
...inputGroupProps
},
/* @__PURE__ */ import_react.default.createElement(import_BaseTextArea.BaseTextArea, { ref, ...rest, ...textAreaProps })
);
}
);
TextArea.displayName = "TextArea";
//# sourceMappingURL=TextArea.js.map

76

build/cjs/TextInput.js

@@ -38,40 +38,42 @@ "use strict";

var import_BaseTextInput = require("./BaseTextInput");
const TextInput = (0, import_react.forwardRef)((props, ref) => {
const {
label,
className,
density,
errorLabel,
helpLabel,
inline,
inputClassName,
labelProps,
supportLabelProps,
tooltipProps,
...rest
} = props;
const inputGroupProps = {
label,
density,
errorLabel,
helpLabel,
labelProps,
inline,
supportLabelProps,
tooltipProps
};
return /* @__PURE__ */ import_react.default.createElement(
import_jkl_input_group_react.InputGroup,
{
...inputGroupProps,
className: (0, import_classnames.default)(className, "jkl-text-input", {
"jkl-text-input--inline": inline
}),
"data-testid": "jkl-text-input",
density: inline ? "compact" : density
},
/* @__PURE__ */ import_react.default.createElement(import_BaseTextInput.BaseTextInput, { ref, ...rest, className: inputClassName })
);
});
const TextInput = (0, import_react.forwardRef)(
(props, ref) => {
const {
label,
className,
density,
errorLabel,
helpLabel,
inline,
inputClassName,
labelProps,
supportLabelProps,
tooltipProps,
...rest
} = props;
const inputGroupProps = {
label,
density,
errorLabel,
helpLabel,
labelProps,
inline,
supportLabelProps,
tooltipProps
};
return /* @__PURE__ */ import_react.default.createElement(
import_jkl_input_group_react.InputGroup,
{
...inputGroupProps,
className: (0, import_classnames.default)(className, "jkl-text-input", {
"jkl-text-input--inline": inline
}),
"data-testid": "jkl-text-input",
density: inline ? "compact" : density
},
/* @__PURE__ */ import_react.default.createElement(import_BaseTextInput.BaseTextInput, { ref, ...rest, className: inputClassName })
);
}
);
TextInput.displayName = "TextInput";
//# sourceMappingURL=TextInput.js.map

175

build/esm/autosuggest/BaseAutosuggest.js

@@ -33,3 +33,5 @@ import { InputGroup } from "@fremtind/jkl-input-group-react";

}) {
const uid = useId(inputId || "jkl-text-input", { generateSuffix: !inputId });
const uid = useId(inputId || "jkl-text-input", {
generateSuffix: !inputId
});
const lid = useId(labelId || "jkl-label", { generateSuffix: !labelId });

@@ -40,82 +42,99 @@ const customLabelProps = {

};
return /* @__PURE__ */ React.createElement(Downshift, { ...downshiftProps, ...customLabelProps, itemToString }, ({
getInputProps,
getToggleButtonProps,
getItemProps,
getLabelProps,
getMenuProps,
getRootProps,
selectedItem,
isOpen,
highlightedIndex,
clearSelection
}) => {
return /* @__PURE__ */ React.createElement(
InputGroup,
{
...getRootProps(),
label,
className: cn("jkl-autosuggest", className),
density,
labelProps: {
variant,
...labelProps,
...getLabelProps({
id: lid
})
},
supportLabelProps,
tooltipProps,
errorLabel,
helpLabel,
render: (inputProps) => /* @__PURE__ */ React.createElement(React.Fragment, null, leadText && /* @__PURE__ */ React.createElement(
"p",
{
className: cn("jkl-spacing-l--bottom", {
"jkl-body": density !== "compact",
"jkl-small": density === "compact"
return /* @__PURE__ */ React.createElement(
Downshift,
{
...downshiftProps,
...customLabelProps,
itemToString
},
({
getInputProps,
getToggleButtonProps,
getItemProps,
getLabelProps,
getMenuProps,
getRootProps,
selectedItem,
isOpen,
highlightedIndex,
clearSelection
}) => {
return /* @__PURE__ */ React.createElement(
InputGroup,
{
...getRootProps(),
label,
className: cn("jkl-autosuggest", className),
density,
labelProps: {
variant,
...labelProps,
...getLabelProps({
id: lid
})
},
leadText
), /* @__PURE__ */ React.createElement("div", { className: "jkl-text-input-wrapper", "data-invalid": !!errorLabel }, /* @__PURE__ */ React.createElement(
"input",
{
...inputProps,
...getInputProps({
id: inputProps.id,
placeholder,
className: "jkl-text-input__input",
onKeyDown: (e) => {
if (e.keyCode === KEY_ENTER && !isOpen) {
onConfirm();
}
supportLabelProps,
tooltipProps,
errorLabel,
helpLabel,
render: (inputProps) => /* @__PURE__ */ React.createElement(React.Fragment, null, leadText && /* @__PURE__ */ React.createElement(
"p",
{
className: cn("jkl-spacing-l--bottom", {
"jkl-body": density !== "compact",
"jkl-small": density === "compact"
})
},
leadText
), /* @__PURE__ */ React.createElement(
"div",
{
className: "jkl-text-input-wrapper",
"data-invalid": !!errorLabel
},
/* @__PURE__ */ React.createElement(
"input",
{
...inputProps,
...getInputProps({
id: inputProps.id,
placeholder,
className: "jkl-text-input__input",
onKeyDown: (e) => {
if (e.keyCode === KEY_ENTER && !isOpen) {
onConfirm();
}
}
}),
"data-testid": "autosuggest__input"
}
}),
"data-testid": "autosuggest__input"
}
), showDropdownControllerButton && /* @__PURE__ */ React.createElement(
ControllerButton,
{
...getToggleButtonProps(),
hasSelectedItem: !!selectedItem,
clearSelection
}
), isOpen && /* @__PURE__ */ React.createElement(
Menu,
{
downshiftProps: {
getMenuProps,
getItemProps
},
highlightedIndex,
items,
itemToString,
noHitsMessage,
maxNumberOfHits,
noHits
}
)))
}
);
});
),
showDropdownControllerButton && /* @__PURE__ */ React.createElement(
ControllerButton,
{
...getToggleButtonProps(),
hasSelectedItem: !!selectedItem,
clearSelection
}
),
isOpen && /* @__PURE__ */ React.createElement(
Menu,
{
downshiftProps: {
getMenuProps,
getItemProps
},
highlightedIndex,
items,
itemToString,
noHitsMessage,
maxNumberOfHits,
noHits
}
)
))
}
);
}
);
}

@@ -122,0 +141,0 @@ var BaseAutosuggest_default = BaseAutosuggest;

7

build/esm/autosuggest/ControllerButton.js
import { IconButton } from "@fremtind/jkl-icon-button-react";
import { SearchIcon, CloseIcon } from "@fremtind/jkl-icons-react";
import React from "react";
const ControllerButton = ({ hasSelectedItem, clearSelection, onClick, ...downshiftProps }) => /* @__PURE__ */ React.createElement(
const ControllerButton = ({
hasSelectedItem,
clearSelection,
onClick,
...downshiftProps
}) => /* @__PURE__ */ React.createElement(
IconButton,

@@ -6,0 +11,0 @@ {

9

build/esm/autosuggest/Menu.js

@@ -17,3 +17,10 @@ import cn from "classnames";

const itemList = visibleItems.length === 0 && noHits ? noHits.items : visibleItems;
return /* @__PURE__ */ React.createElement("div", { "data-testid": "autosuggest__menu", className: "jkl-autosuggest__menu" }, (noHitsMessage || noHits) && visibleItems.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "jkl-autosuggest__no-hits-message", "aria-live": "polite" }, noHitsMessage || (noHits == null ? void 0 : noHits.text)), itemList.length > 0 && /* @__PURE__ */ React.createElement(
return /* @__PURE__ */ React.createElement("div", { "data-testid": "autosuggest__menu", className: "jkl-autosuggest__menu" }, (noHitsMessage || noHits) && visibleItems.length === 0 && /* @__PURE__ */ React.createElement(
"div",
{
className: "jkl-autosuggest__no-hits-message",
"aria-live": "polite"
},
noHitsMessage || (noHits == null ? void 0 : noHits.text)
), itemList.length > 0 && /* @__PURE__ */ React.createElement(
"ul",

@@ -20,0 +27,0 @@ {

201

build/esm/BaseTextArea.js

@@ -7,104 +7,115 @@ import React, {

} from "react";
const BaseTextArea = forwardRef((props, ref) => {
const {
autoExpand,
counter,
onBlur,
onFocus,
rows = 7,
placeholder = " ",
// This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.
startOpen,
style,
value,
"aria-invalid": ariaInvalid,
onChange,
...rest
} = props;
const [counterCurrent, setCounterCurrent] = useState(() => {
if (typeof value === "undefined") {
return 0;
} else if (typeof value === "number") {
return String(value).length;
} else {
return value.length;
}
});
const [textAreaFocused, setTextAreaFocused] = useState(false);
const internalRef = useRef(null);
const textAreaRef = ref || internalRef;
useEffect(() => {
const textAreaElement = textAreaRef.current;
if (textAreaElement) {
if (!autoExpand) {
textAreaElement.style.height = "";
return;
}
if (textAreaFocused || value) {
textAreaElement.style.height = "auto";
textAreaElement.style.height = "".concat(textAreaElement.scrollHeight, "px");
const BaseTextArea = forwardRef(
(props, ref) => {
const {
autoExpand,
counter,
onBlur,
onFocus,
rows = 7,
placeholder = " ",
// This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.
startOpen,
style,
value,
"aria-invalid": ariaInvalid,
onChange,
...rest
} = props;
const [counterCurrent, setCounterCurrent] = useState(() => {
if (typeof value === "undefined") {
return 0;
} else if (typeof value === "number") {
return String(value).length;
} else {
textAreaElement.style.height = "";
return value.length;
}
});
const [textAreaFocused, setTextAreaFocused] = useState(false);
const internalRef = useRef(null);
const textAreaRef = ref || internalRef;
useEffect(() => {
const textAreaElement = textAreaRef.current;
if (textAreaElement) {
if (!autoExpand) {
textAreaElement.style.height = "";
return;
}
if (textAreaFocused || value) {
textAreaElement.style.height = "auto";
textAreaElement.style.height = "".concat(textAreaElement.scrollHeight, "px");
} else {
textAreaElement.style.height = "";
}
}
}, [autoExpand, textAreaRef, value, textAreaFocused]);
function handleOnFocus(e) {
setTextAreaFocused(true);
if (onFocus) {
onFocus(e);
}
}
}, [autoExpand, textAreaRef, value, textAreaFocused]);
function handleOnFocus(e) {
setTextAreaFocused(true);
if (onFocus) {
onFocus(e);
function handleOnBlur(e) {
setTextAreaFocused(false);
if (onBlur) {
onBlur(e);
}
}
}
function handleOnBlur(e) {
setTextAreaFocused(false);
if (onBlur) {
onBlur(e);
function handleOnChange(e) {
setCounterCurrent(e.target.value.length);
if (onChange) {
onChange(e);
}
}
}
function handleOnChange(e) {
setCounterCurrent(e.target.value.length);
if (onChange) {
onChange(e);
const counterTotal = (counter == null ? void 0 : counter.maxLength) || 0;
const progressCurrent = counterTotal - counterCurrent;
function calculatePercentage(current, total) {
if (current <= 0) {
return 0;
}
return total === 0 ? 0 : current * 100 / total;
}
const counterLabel = counter && counterCurrent > counterTotal ? "Du har skrevet ".concat(counterCurrent - counterTotal, " tegn for mye") : void 0;
const invalid = Boolean(ariaInvalid || counterLabel);
const overflowStyle = {
overflowX: autoExpand ? "hidden" : void 0
// Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700
};
return /* @__PURE__ */ React.createElement(
"div",
{
className: "jkl-text-input-wrapper",
"data-invalid": invalid,
"data-has-content": counterCurrent > 0
},
/* @__PURE__ */ React.createElement(
"textarea",
{
"aria-invalid": invalid,
className: "jkl-text-area__text-area jkl-text-area__text-area--".concat(rows, "-rows"),
onBlur: handleOnBlur,
onFocus: handleOnFocus,
onChange: handleOnChange,
ref: textAreaRef,
style: { ...style, ...overflowStyle },
placeholder,
value,
...rest
}
),
counter && /* @__PURE__ */ React.createElement("div", { className: "jkl-text-area__counter", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("div", { className: "jkl-text-area__counter-count" }, counterCurrent, "\xA0/\xA0", counterTotal), !counter.hideProgress && /* @__PURE__ */ React.createElement(
"div",
{
className: "jkl-text-area__counter-progress",
style: {
["--progress-width"]: "".concat(calculatePercentage(
progressCurrent,
counterTotal
), "%")
}
}
))
);
}
const counterTotal = (counter == null ? void 0 : counter.maxLength) || 0;
const progressCurrent = counterTotal - counterCurrent;
function calculatePercentage(current, total) {
if (current <= 0) {
return 0;
}
return total === 0 ? 0 : current * 100 / total;
}
const counterLabel = counter && counterCurrent > counterTotal ? "Du har skrevet ".concat(counterCurrent - counterTotal, " tegn for mye") : void 0;
const invalid = Boolean(ariaInvalid || counterLabel);
const overflowStyle = {
overflowX: autoExpand ? "hidden" : void 0
// Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700
};
return /* @__PURE__ */ React.createElement("div", { className: "jkl-text-input-wrapper", "data-invalid": invalid, "data-has-content": counterCurrent > 0 }, /* @__PURE__ */ React.createElement(
"textarea",
{
"aria-invalid": invalid,
className: "jkl-text-area__text-area jkl-text-area__text-area--".concat(rows, "-rows"),
onBlur: handleOnBlur,
onFocus: handleOnFocus,
onChange: handleOnChange,
ref: textAreaRef,
style: { ...style, ...overflowStyle },
placeholder,
value,
...rest
}
), counter && /* @__PURE__ */ React.createElement("div", { className: "jkl-text-area__counter", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("div", { className: "jkl-text-area__counter-count" }, counterCurrent, "\xA0/\xA0", counterTotal), !counter.hideProgress && /* @__PURE__ */ React.createElement(
"div",
{
className: "jkl-text-area__counter-progress",
style: {
["--progress-width"]: "".concat(calculatePercentage(
progressCurrent,
counterTotal
), "%")
}
}
)));
});
);
BaseTextArea.displayName = "BaseTextArea";

@@ -111,0 +122,0 @@ export {

107

build/esm/BaseTextInput.js

@@ -17,55 +17,60 @@ import { IconButton } from "@fremtind/jkl-icon-button-react";

}
const BaseTextInput = forwardRef((props, ref) => {
const {
action,
align = "left",
"aria-invalid": ariaInvalid,
className = "",
density,
maxLength,
style,
type = "text",
unit,
width,
actionButton,
...rest
} = props;
return /* @__PURE__ */ React.createElement(
"div",
{
className: "jkl-text-input-wrapper",
"data-invalid": ariaInvalid,
style: { ...style, ...getWidthAsStyle(width, maxLength) }
},
/* @__PURE__ */ React.createElement(
"input",
const BaseTextInput = forwardRef(
(props, ref) => {
const {
action,
align = "left",
"aria-invalid": ariaInvalid,
className = "",
density,
maxLength,
style,
type = "text",
unit,
width,
actionButton,
...rest
} = props;
return /* @__PURE__ */ React.createElement(
"div",
{
"aria-invalid": ariaInvalid,
ref,
className: cn("jkl-text-input__input", className, {
"jkl-text-input__input--align-right": align === "right"
}),
maxLength,
type,
...rest
}
),
unit && /* @__PURE__ */ React.createElement("span", { className: "jkl-text-input__unit" }, unit),
!action && actionButton && actionButton,
action && !actionButton && /* @__PURE__ */ React.createElement(
IconButton,
{
density,
className: cn("jkl-text-input-action-button", action.className),
title: action.label,
onClick: action.onClick,
onFocus: action.onFocus,
onBlur: action.onBlur,
ref: action.buttonRef,
type: action.type || "button"
className: "jkl-text-input-wrapper",
"data-invalid": ariaInvalid,
style: { ...style, ...getWidthAsStyle(width, maxLength) }
},
action.icon
)
);
});
/* @__PURE__ */ React.createElement(
"input",
{
"aria-invalid": ariaInvalid,
ref,
className: cn("jkl-text-input__input", className, {
"jkl-text-input__input--align-right": align === "right"
}),
maxLength,
type,
...rest
}
),
unit && /* @__PURE__ */ React.createElement("span", { className: "jkl-text-input__unit" }, unit),
!action && actionButton && actionButton,
action && !actionButton && /* @__PURE__ */ React.createElement(
IconButton,
{
density,
className: cn(
"jkl-text-input-action-button",
action.className
),
title: action.label,
onClick: action.onClick,
onFocus: action.onFocus,
onBlur: action.onBlur,
ref: action.buttonRef,
type: action.type || "button"
},
action.icon
)
);
}
);
BaseTextInput.displayName = "BaseInputField";

@@ -72,0 +77,0 @@ export {

86

build/esm/TextArea.js

@@ -1,45 +0,49 @@

import { InputGroup } from "@fremtind/jkl-input-group-react";
import {
InputGroup
} from "@fremtind/jkl-input-group-react";
import cn from "classnames";
import React, { forwardRef } from "react";
import { BaseTextArea } from "./BaseTextArea";
const TextArea = forwardRef((props, ref) => {
const {
autoExpand,
className,
counter,
density,
errorLabel,
helpLabel,
inline,
label,
labelProps,
startOpen,
supportLabelProps,
tooltipProps,
...rest
} = props;
const inputGroupProps = {
label,
density,
errorLabel,
helpLabel,
labelProps,
inline,
supportLabelProps,
tooltipProps
};
const textAreaProps = { autoExpand, counter, startOpen };
return /* @__PURE__ */ React.createElement(
InputGroup,
{
className: cn("jkl-text-area", className, {
"jkl-text-area--start-open": startOpen,
"jkl-text-area--auto-expand": autoExpand
}),
"data-testid": "jkl-text-area",
...inputGroupProps
},
/* @__PURE__ */ React.createElement(BaseTextArea, { ref, ...rest, ...textAreaProps })
);
});
const TextArea = forwardRef(
(props, ref) => {
const {
autoExpand,
className,
counter,
density,
errorLabel,
helpLabel,
inline,
label,
labelProps,
startOpen,
supportLabelProps,
tooltipProps,
...rest
} = props;
const inputGroupProps = {
label,
density,
errorLabel,
helpLabel,
labelProps,
inline,
supportLabelProps,
tooltipProps
};
const textAreaProps = { autoExpand, counter, startOpen };
return /* @__PURE__ */ React.createElement(
InputGroup,
{
className: cn("jkl-text-area", className, {
"jkl-text-area--start-open": startOpen,
"jkl-text-area--auto-expand": autoExpand
}),
"data-testid": "jkl-text-area",
...inputGroupProps
},
/* @__PURE__ */ React.createElement(BaseTextArea, { ref, ...rest, ...textAreaProps })
);
}
);
TextArea.displayName = "TextArea";

@@ -46,0 +50,0 @@ export {

76

build/esm/TextInput.js

@@ -5,39 +5,41 @@ import { InputGroup } from "@fremtind/jkl-input-group-react";

import { BaseTextInput } from "./BaseTextInput";
const TextInput = forwardRef((props, ref) => {
const {
label,
className,
density,
errorLabel,
helpLabel,
inline,
inputClassName,
labelProps,
supportLabelProps,
tooltipProps,
...rest
} = props;
const inputGroupProps = {
label,
density,
errorLabel,
helpLabel,
labelProps,
inline,
supportLabelProps,
tooltipProps
};
return /* @__PURE__ */ React.createElement(
InputGroup,
{
...inputGroupProps,
className: cn(className, "jkl-text-input", {
"jkl-text-input--inline": inline
}),
"data-testid": "jkl-text-input",
density: inline ? "compact" : density
},
/* @__PURE__ */ React.createElement(BaseTextInput, { ref, ...rest, className: inputClassName })
);
});
const TextInput = forwardRef(
(props, ref) => {
const {
label,
className,
density,
errorLabel,
helpLabel,
inline,
inputClassName,
labelProps,
supportLabelProps,
tooltipProps,
...rest
} = props;
const inputGroupProps = {
label,
density,
errorLabel,
helpLabel,
labelProps,
inline,
supportLabelProps,
tooltipProps
};
return /* @__PURE__ */ React.createElement(
InputGroup,
{
...inputGroupProps,
className: cn(className, "jkl-text-input", {
"jkl-text-input--inline": inline
}),
"data-testid": "jkl-text-input",
density: inline ? "compact" : density
},
/* @__PURE__ */ React.createElement(BaseTextInput, { ref, ...rest, className: inputClassName })
);
}
);
TextInput.displayName = "TextInput";

@@ -44,0 +46,0 @@ export {

18

package.json
{
"name": "@fremtind/jkl-text-input-react",
"version": "15.2.5",
"version": "15.2.6",
"publishConfig": {

@@ -45,9 +45,9 @@ "access": "public"

"dependencies": {
"@fremtind/jkl-core": "^14.8.1",
"@fremtind/jkl-icon-button-react": "^5.0.18",
"@fremtind/jkl-icons-react": "^9.1.13",
"@fremtind/jkl-input-group-react": "^3.0.51",
"@fremtind/jkl-react-hooks": "^12.2.5",
"@fremtind/jkl-text-input": "^12.1.25",
"@fremtind/jkl-tooltip-react": "^4.4.4",
"@fremtind/jkl-core": "^14.8.2",
"@fremtind/jkl-icon-button-react": "^5.0.19",
"@fremtind/jkl-icons-react": "^9.1.14",
"@fremtind/jkl-input-group-react": "^3.0.52",
"@fremtind/jkl-react-hooks": "^12.2.6",
"@fremtind/jkl-text-input": "^12.1.26",
"@fremtind/jkl-tooltip-react": "^4.4.5",
"classnames": "^2.3.2",

@@ -70,3 +70,3 @@ "downshift": "^7.6.0",

},
"gitHead": "9c4193c00f51b351ca7c65f951c78adf682c2c15"
"gitHead": "82508b6f72780226367f81cd8a6a2f5417484c9a"
}
build/cjs/autosuggest/Autosuggest.js.map

Sorry, the diff of this file is not supported yet

build/cjs/autosuggest/BaseAutosuggest.js.map

Sorry, the diff of this file is not supported yet

build/cjs/autosuggest/ControllerButton.js.map

Sorry, the diff of this file is not supported yet

build/cjs/autosuggest/Menu.js.map

Sorry, the diff of this file is not supported yet

build/cjs/autosuggest/utils.js.map

Sorry, the diff of this file is not supported yet

build/cjs/BaseTextArea.js.map

Sorry, the diff of this file is not supported yet

build/cjs/BaseTextInput.js.map

Sorry, the diff of this file is not supported yet

build/cjs/TextArea.js.map

Sorry, the diff of this file is not supported yet

build/cjs/TextInput.js.map

Sorry, the diff of this file is not supported yet

build/esm/autosuggest/Autosuggest.js.map

Sorry, the diff of this file is not supported yet

build/esm/autosuggest/BaseAutosuggest.js.map

Sorry, the diff of this file is not supported yet

build/esm/autosuggest/ControllerButton.js.map

Sorry, the diff of this file is not supported yet

build/esm/autosuggest/Menu.js.map

Sorry, the diff of this file is not supported yet

build/esm/autosuggest/utils.js.map

Sorry, the diff of this file is not supported yet

build/esm/BaseTextArea.js.map

Sorry, the diff of this file is not supported yet

build/esm/BaseTextInput.js.map

Sorry, the diff of this file is not supported yet

build/esm/TextArea.js.map

Sorry, the diff of this file is not supported yet

build/esm/TextInput.js.map

Sorry, the diff of this file is not supported yet