@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,118 +0,0 @@
-'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

@@ -1,17 +0,0 @@
-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

@@ -1,112 +0,0 @@
-'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

@@ -1,70 +0,0 @@
-.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);
-}