@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/forms/text-area/Textarea.cjs

@@ -0,0 +1,118 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
+var styles = require('./Textarea.module.css');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const Textarea = function Textarea2({
+  value,
+  inputChanged,
+  disabled,
+  rows = 3,
+  showCount,
+  tooltip,
+  tooltipPlacement = "right",
+  showTooltip,
+  placeholder,
+  adjustHeight,
+  id,
+  modified = false,
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required,
+  labelAction,
+  // Native textarea props
+  className,
+  ...rest
+}) {
+  const HEIGHT_BUFFER_PX = 2;
+  const generatedId = react.useId();
+  const textareaId = id != null ? id : `textarea-${generatedId}`;
+  const textareaRef = react.useRef(null);
+  const syncHeight = react.useCallback(
+    (textarea) => {
+      if (!adjustHeight) return;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight + HEIGHT_BUFFER_PX}px`;
+    },
+    [adjustHeight]
+  );
+  react.useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    syncHeight(textarea);
+  }, [syncHeight, value, rows]);
+  const onInput = react.useCallback(
+    (e) => {
+      const textarea = e.currentTarget;
+      syncHeight(textarea);
+      inputChanged(e);
+    },
+    [inputChanged, syncHeight]
+  );
+  const inputField = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ...rest,
+        ref: textareaRef,
+        id: textareaId,
+        className: [styles__default.default.textarea, className].filter(Boolean).join(" "),
+        placeholder,
+        rows,
+        value,
+        onChange: onInput,
+        disabled,
+        "aria-invalid": Boolean(error) || void 0
+      }
+    ),
+    [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]
+  );
+  const tooltipEnabled = Boolean(tooltip) && (showTooltip != null ? showTooltip : true);
+  const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8,
+    delayOpenMs: 0,
+    focusOpenMode: "any",
+    closeOnPointerDown: false
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      modified,
+      label,
+      htmlFor: textareaId,
+      error,
+      helpText,
+      helpTextAddition: showCount ? `${value == null ? void 0 : value.length} tegn i denne boks` : void 0,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      labelAction,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: [styles__default.default.container, modified ? styles__default.default.modified : ""].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField })
+        }
+      )
+    }
+  );
+};
+Textarea.displayName = "Textarea";
+
+exports.Textarea = Textarea;

package/dist/components/forms/text-area/Textarea.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { InputContainerProps } from '../input-container/InputContainer';
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'disabled'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement' | 'size'> & {
+    value: string;
+    inputChanged: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    disabled?: boolean;
+    loading?: React.ReactNode;
+    rows?: number;
+    showCount?: boolean;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    showTooltip?: boolean;
+    adjustHeight?: boolean;
+    placeholder?: string;
+    id?: string;
+};
+export declare const Textarea: React.FC<TextareaProps>;

package/dist/components/forms/text-area/Textarea.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Textarea.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+const Textarea = function Textarea2({
+  value,
+  inputChanged,
+  disabled,
+  rows = 3,
+  showCount,
+  tooltip,
+  tooltipPlacement = "right",
+  showTooltip,
+  placeholder,
+  adjustHeight,
+  id,
+  modified = false,
+  // InputContainer props
+  label,
+  error,
+  helpText,
+  orientation = "horizontal",
+  labelWidth = "160px",
+  fullWidth = false,
+  required,
+  labelAction,
+  // Native textarea props
+  className,
+  ...rest
+}) {
+  const HEIGHT_BUFFER_PX = 2;
+  const generatedId = useId();
+  const textareaId = id != null ? id : `textarea-${generatedId}`;
+  const textareaRef = useRef(null);
+  const syncHeight = useCallback(
+    (textarea) => {
+      if (!adjustHeight) return;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight + HEIGHT_BUFFER_PX}px`;
+    },
+    [adjustHeight]
+  );
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    syncHeight(textarea);
+  }, [syncHeight, value, rows]);
+  const onInput = useCallback(
+    (e) => {
+      const textarea = e.currentTarget;
+      syncHeight(textarea);
+      inputChanged(e);
+    },
+    [inputChanged, syncHeight]
+  );
+  const inputField = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...rest,
+        ref: textareaRef,
+        id: textareaId,
+        className: [styles.textarea, className].filter(Boolean).join(" "),
+        placeholder,
+        rows,
+        value,
+        onChange: onInput,
+        disabled,
+        "aria-invalid": Boolean(error) || void 0
+      }
+    ),
+    [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]
+  );
+  const tooltipEnabled = Boolean(tooltip) && (showTooltip != null ? showTooltip : true);
+  const { triggerProps } = useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8,
+    delayOpenMs: 0,
+    focusOpenMode: "any",
+    closeOnPointerDown: false
+  });
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      modified,
+      label,
+      htmlFor: textareaId,
+      error,
+      helpText,
+      helpTextAddition: showCount ? `${value == null ? void 0 : value.length} tegn i denne boks` : void 0,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      labelAction,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: [styles.container, modified ? styles.modified : ""].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField })
+        }
+      )
+    }
+  );
+};
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/dist/components/forms/text-area/Textarea.module.css

@@ -0,0 +1,70 @@
+.container {
+  flex-grow: 1;
+}
+
+.container.modified textarea {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 45%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+  border-left-width: 4px;
+}
+
+.container.modified textarea:hover {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+}
+
+.container.modified textarea:focus-visible {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
+  border-left-color: var(--color-status-warning-border);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+}
+.container textarea {
+  width: 100%;
+  padding: var(--spacing-xs);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
+}
+
+.container textarea:disabled {
+  background-color: var(--color-disabled-bg);
+  border: 0;
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.internalCount {
+  text-align: right;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-subtle);
+}
+
+.container textarea:hover {
+  border-color: var(--color-border-strong);
+}
+
+.container textarea:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+}