@redsift/design-system 13.0.5 → 13.1.0

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 (8) hide show
  1. package/_internal/NumberField.js.map +1 -1
  2. package/_internal/TextArea.js.map +1 -1
  3. package/_internal/TextField.js +105 -14
  4. package/_internal/TextField.js.map +1 -1
  5. package/_internal/text-field.js +1 -1
  6. package/index.d.ts +13 -3
  7. package/index.js +1 -1
  8. package/package.json +3 -3
package/_internal/TextArea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sources":["../../src/hooks/useComputeNumberOfRows.ts","../../src/components/text-area/types.ts","../../src/components/text-area/styles.ts","../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { useState } from 'react';\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nexport const useComputeNumberOfRows = (\n minimumRows: number\n): {\n /** number of rows to be used on the text area */\n rows: number;\n /**\n * Callback in order to recalculate the number of rows due to a change on the text area\n */\n recomputeNumberOfRows(target: Element): void;\n} => {\n const [rows, setRows] = useState(minimumRows);\n\n const recompute = (target: Element) => {\n /**\n * HEAD's UP! This part is a little bit tricky. The idea here is to only\n * display the necessary rows on the textarea. In order to dynamically adjust\n * the height on that field, we need to:\n * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n * by the line height.\n * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n * when we will not see the update and the rows will be resized to the minimum.\n * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n */\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = minimumRows;\n let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = currentRows;\n\n setRows(currentRows);\n };\n\n return {\n recomputeNumberOfRows: recompute,\n rows,\n };\n};\n","import { ChangeEvent, ComponentProps, RefObject } from 'react';\nimport { ValueOf } from '../../types';\nimport { StyledTextFieldProps, TextFieldProps } from '../text-field';\n\n/**\n * Component variant.\n */\nexport const TextAreaVariant = {\n default: 'default',\n underline: 'underline',\n} as const;\nexport type TextAreaVariant = ValueOf<typeof TextAreaVariant>;\n\n/**\n * Component props.\n */\nexport interface TextAreaProps\n extends Omit<\n TextFieldProps,\n 'onChange' | 'inputRef' | 'inputProps' | 'pills' | 'internal' | 'hasClearButton' | 'onClear'\n > {\n /** Custom ref object to pass to the textarea element. */\n textareaRef?: RefObject<HTMLTextAreaElement | null>;\n /** Custom props to pass to the textarea element. */\n textareaProps?: ComponentProps<'textarea'>;\n /** Method to handle component change. */\n onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLTextAreaElement>): void;\n /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n minimumRows?: number;\n}\n\nexport type StyledTextAreaProps = StyledTextFieldProps;\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTextAreaProps, TextAreaVariant } from './types';\nimport { StyledHighlightOverlayProps } from '../text-field/types';\nimport { Theme, NotificationsColorPalette } from '../../types';\n\n/* eslint-disable @redsift/ds/no-outline-none-without-indicator -- the input's own outline is replaced by the field's border, which turns the focus colour through $isFocused */\n/**\n * Component style.\n */\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n height: fit-content;\n position: relative;\n width: fit-content;\n margin: 0;\n min-width: 0;\n padding: 0;\n ${baseStyling}\n\n border: 0;\n display: inline-flex;\n flex-direction: column;\n vertical-align: top;\n\n ${({\n $label,\n $hasLeftIcon,\n $hasContent,\n $hasHighlightOverlay,\n $isFocused,\n $isDisabled,\n $isInvalid,\n $color,\n $isGradient,\n $theme,\n $variant,\n }) => css`\n ${$isDisabled\n ? css`\n pointer-events: none;\n `\n : ''}\n\n .redsift-text-area__label {\n font-family: var(--redsift-typography-input-text-font-family);\n font-size: var(--redsift-typography-input-text-font-size);\n font-weight: var(--redsift-typography-input-text-font-weight);\n line-height: var(--redsift-typography-input-text-line-height);\n left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n text-overflow: ellipsis;\n top: ${$hasContent ? '-8px' : '-6px'};\n transform-origin: top left;\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n white-space: nowrap;\n z-index: 1;\n\n ${!$hasContent\n ? css`\n max-width: calc(100% - 24px);\n transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n `\n : css`\n max-width: calc(133% - 32px);\n transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);\n `}\n\n ${!$isGradient\n ? css`\n color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n ? 'error'\n : $isFocused\n ? $color\n : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n );\n `\n : css`\n background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});\n ${$variant !== TextAreaVariant.underline\n ? css`\n padding-right: 7px;\n padding-left: 5px;\n `\n : ''}\n > span {\n background: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n ? 'error'\n : $isFocused\n ? $color\n : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n );\n background-clip: text;\n color: transparent;\n }\n `}\n }\n\n .redsift-text-area__text-area-wrapper {\n align-items: flex-start;\n box-sizing: border-box;\n cursor: text;\n display: inline-flex;\n min-height: 42px;\n position: relative;\n width: 100%;\n }\n\n .redsift-text-area-text-area-wrapper__text-area {\n flex: 1 1 auto;\n padding-bottom: 9px;\n ${$variant !== TextAreaVariant.underline && !$hasLeftIcon\n ? css`\n padding-left: 16px;\n `\n : ''}\n padding-top: ${$label ? '10px' : '9px'};\n padding-right: 8px;\n }\n\n .redsift-text-area-text-area-wrapper-text-area__container {\n position: relative;\n width: 100%;\n\n textarea {\n background: transparent;\n display: block;\n border: none;\n outline: none;\n width: 100%;\n padding: 0;\n margin: 0;\n box-sizing: content-box;\n font-family: ${$hasHighlightOverlay\n ? 'var(--redsift-typography-font-family-inconsolata)'\n : 'var(--redsift-typography-input-text-font-family)'};\n font-size: 14px;\n font-weight: var(--redsift-typography-input-text-font-weight);\n line-height: var(--redsift-typography-input-text-line-height);\n resize: none;\n position: relative;\n z-index: 1;\n\n ${$isDisabled\n ? css`\n color: var(--redsift-color-neutral-light-grey);\n `\n : $hasHighlightOverlay\n ? css`\n color: transparent;\n caret-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n `\n : css`\n color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n `}\n }\n }\n\n .redsift-text-area-text-area-wrapper__highlight-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n font-family: var(--redsift-typography-font-family-inconsolata);\n font-size: 14px;\n font-weight: var(--redsift-typography-input-text-font-weight);\n line-height: var(--redsift-typography-input-text-line-height);\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow: hidden;\n color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n\n /* Remove padding from marks to maintain exact character alignment with textarea */\n mark {\n padding: 0;\n }\n }\n\n .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area::placeholder {\n color: var(--redsift-color-neutral-mid-grey);\n }\n\n .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area:focus {\n outline: 0;\n }\n\n .redsift-text-area-text-area-wrapper__fieldset {\n border-style: solid;\n bottom: 0;\n left: 1px;\n margin: 0;\n min-width: 0%;\n overflow: hidden;\n padding: 0 8px;\n pointer-events: none;\n position: absolute;\n right: 0;\n text-align: left;\n top: -5px;\n\n ${!$isGradient || $isDisabled || !$isFocused || $isInvalid\n ? css`\n ${$variant === TextAreaVariant.underline\n ? css`\n border-bottom-width: 2px;\n `\n : css`\n border-radius: 4px;\n border-width: 2px;\n `}\n border-color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n ? 'error'\n : $isFocused\n ? $color\n : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n );\n `\n : css`\n ${$variant === TextAreaVariant.underline\n ? css`\n border-bottom: 2px solid transparent;\n `\n : css`\n border: 2px solid transparent;\n border-radius: 4px;\n `}\n background: transparent;\n background-clip: padding-box, border-box;\n background-origin: border-box;\n background-image: linear-gradient(\n 90deg,\n var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),\n var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})\n ),\n var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);\n `}\n }\n\n .redsift-text-area-text-area-wrapper-fieldset__legend {\n display: block;\n float: unset;\n font-size: 11px;\n height: 11px;\n overflow: hidden;\n padding: 0;\n visibility: hidden;\n white-space: nowrap;\n width: auto;\n\n ${!$hasContent\n ? css`\n max-width: 0.01px;\n transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n `\n : css`\n max-width: 100%;\n transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n `}\n }\n\n .redsift-text-area-text-area-wrapper-fieldset__legend > span {\n display: inline-block;\n opacity: 0;\n padding-left: 5px;\n padding-right: 5px;\n visibility: visible;\n }\n\n .redsift-text-area-text-area-wrapper__toolbar {\n position: relative;\n top: 7px;\n }\n\n .redsift-icon-button {\n padding: 2px;\n height: 28px;\n width: 28px;\n }\n\n ${$variant !== TextAreaVariant.underline\n ? css`\n .redsift-icon.left {\n padding-left: 12px;\n padding-right: 8px;\n line-height: 28px;\n top: 10px;\n }\n\n .redsift-text-area-text-area-wrapper__toolbar {\n padding-right: 8px;\n }\n `\n : css`\n .redsift-icon.left {\n padding-right: 8px;\n top: 10px;\n }\n `}\n `}\n`;\n/* eslint-enable @redsift/ds/no-outline-none-without-indicator */\n\n/**\n * Resolves background color from prop value.\n * Handles: boolean (true=warning), palette colors, and custom CSS values.\n */\nconst resolveBackgroundColor = (background: true | string): string => {\n if (background === true) {\n return 'var(--redsift-color-notifications-warning-primary)';\n }\n // Check if it's a notification palette color name\n const paletteColors = Object.values(NotificationsColorPalette);\n if (paletteColors.includes(background as NotificationsColorPalette)) {\n return `var(--redsift-color-notifications-${background}-primary)`;\n }\n // Assume it's a CSS color value (hex, rgb, etc.)\n return background;\n};\n\n/**\n * Styled marker for highlighted non-ASCII characters in TextArea.\n */\nexport const StyledHighlightMarker = styled.mark<StyledHighlightOverlayProps>`\n ${({ $font, $background, $hasInvisible }) => css`\n /* Reset the default <mark> styling */\n background: ${$background ? resolveBackgroundColor($background) : 'transparent'};\n color: inherit;\n border-radius: 2px;\n padding: 0 1px;\n position: relative;\n\n /* Use Inconsolata with bold weight to break kerning and reveal lookalike chars */\n ${$font &&\n css`\n font-family: var(--redsift-typography-font-family-inconsolata);\n font-weight: 700;\n `}\n\n /* Show a visual indicator for invisible/zero-width characters */\n ${$hasInvisible &&\n css`\n &::after {\n content: '•';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n color: var(--redsift-color-neutral-x-dark-grey);\n ${$background &&\n css`\n background-color: ${resolveBackgroundColor($background)};\n opacity: 0.8;\n `}\n border-radius: 2px;\n pointer-events: none;\n }\n `}\n `}\n`;\n","import React, {\n ComponentProps,\n FocusEvent,\n forwardRef,\n MutableRefObject,\n ReactNode,\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { useFocusWithin } from '../../react-aria/react-aria/interactions';\nimport { ButtonsColorPalette, Comp, getStylingTransientProps } from '../../types';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport {\n isNonAscii,\n containsInvisibleChars,\n normalizeHighlightOptions,\n NormalizedHighlightOptions,\n} from '../../utils/highlightNonAscii';\nimport { TextAreaProps, TextAreaVariant } from './types';\nimport { StyledTextArea, StyledHighlightMarker } from './styles';\nimport { Icon } from '../../components/icon';\nimport { useTheme } from '../theme';\nimport { useComputeNumberOfRows } from '../../hooks';\nimport { useId } from '../../utils';\nimport { Flexbox } from '../flexbox';\n\nconst COMPONENT_NAME = 'TextArea';\nconst CLASSNAME = 'redsift-text-area';\n\n/**\n * Processes a string and wraps consecutive non-ASCII characters in highlight markers.\n * Groups consecutive non-ASCII characters to minimize DOM nodes.\n * Invisible characters are NOT replaced (to maintain width alignment) but marked\n * with a $hasInvisible prop for CSS-based visual indication.\n */\nconst highlightNonAsciiChars = (text: string, options: NormalizedHighlightOptions): ReactNode[] => {\n const result: ReactNode[] = [];\n let currentAscii = '';\n let currentNonAscii = '';\n let keyIndex = 0;\n\n // Use Array.from to correctly handle Unicode surrogate pairs (e.g., emojis)\n const chars = Array.from(text);\n\n for (const char of chars) {\n if (isNonAscii(char)) {\n // Flush ASCII buffer\n if (currentAscii) {\n result.push(currentAscii);\n currentAscii = '';\n }\n currentNonAscii += char;\n } else {\n // Flush non-ASCII buffer\n if (currentNonAscii) {\n result.push(\n <StyledHighlightMarker\n key={keyIndex++}\n $font={options.font}\n $background={options.background}\n $hasInvisible={containsInvisibleChars(currentNonAscii)}\n >\n {currentNonAscii}\n </StyledHighlightMarker>\n );\n currentNonAscii = '';\n }\n currentAscii += char;\n }\n }\n\n // Flush remaining buffers\n if (currentAscii) {\n result.push(currentAscii);\n }\n if (currentNonAscii) {\n result.push(\n <StyledHighlightMarker\n key={keyIndex}\n $font={options.font}\n $background={options.background}\n $hasInvisible={containsInvisibleChars(currentNonAscii)}\n >\n {currentNonAscii}\n </StyledHighlightMarker>\n );\n }\n\n return result;\n};\n\n/**\n * TextArea allows users to enter multi-line text. Supports auto-growing height,\n * validation, and controlled/uncontrolled modes.\n *\n * @example\n * // Basic text area\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * @example\n * // Controlled with validation\n * <TextArea\n * label=\"Comments\"\n * value={comments}\n * onChange={setComments}\n * isInvalid={comments.length > 500}\n * isRequired\n * />\n *\n * @example\n * // Auto-growing with minimum rows\n * <TextArea label=\"Message\" minimumRows={3} />\n *\n * @example\n * // With icon and variant\n * <TextArea\n * label=\"Notes\"\n * variant=\"underline\"\n * leftIcon={{ icon: mdiNote }}\n * />\n */\nexport const TextArea: Comp<TextAreaProps, HTMLDivElement> = forwardRef((props, ref) => {\n const propsWithDefaults = {\n width: '100%' as const,\n ...props,\n };\n\n const { transientProps, otherProps } = getStylingTransientProps(propsWithDefaults);\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n after,\n autoFocus,\n className,\n color: propsColor,\n defaultValue = '',\n forceColor,\n highlightNonAscii,\n isColored = true,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n label,\n leftIcon,\n minimumRows,\n name,\n onBlur: onBlurProps,\n onChange,\n onFocus: onFocusProps,\n placeholder,\n textareaProps,\n textareaRef: propsTextareaRef,\n theme: propsTheme,\n value: propsValue,\n variant = TextAreaVariant.default,\n ...forwardedProps\n } = otherProps;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : isColored ? 'primary' : 'grey';\n const isGradient = color === ButtonsColorPalette.radar;\n\n const _textareaRef = React.useRef(null);\n const textareaRef = propsTextareaRef ?? _textareaRef;\n\n const {\n isFocusVisible,\n isFocused,\n focusProps: { onFocus, onBlur },\n } = useFocusRing({\n autoFocus,\n });\n const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));\n const { focusWithinProps } = useFocusWithin({\n onFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n });\n\n const [value, setValue] = useState(defaultValue);\n const isControlled = propsValue !== null && propsValue !== undefined;\n\n const [labelId] = useId();\n\n // Normalize highlight options - force font: false since the textarea uses Inconsolata directly\n const highlightOptions = highlightNonAscii ? { ...normalizeHighlightOptions(highlightNonAscii), font: false } : null;\n\n warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [label], 'TextArea');\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n if (onChange) {\n onChange(event.target.value, name, event);\n } else {\n setValue(event.target.value);\n }\n },\n [onChange]\n );\n\n const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(minimumRows || 4);\n useEffect(() => {\n // Recompute the number of rows for the first rendering\n if (textareaRef && textareaRef.current) {\n recomputeNumberOfRows(textareaRef.current);\n }\n }, [textareaRef, recomputeNumberOfRows, value]);\n\n return (\n <StyledTextArea\n {...focusWithinProps}\n {...forwardedProps}\n {...transientProps}\n $label={label}\n $hasContent={isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder)}\n $hasLeftIcon={Boolean(leftIcon)}\n $hasHighlightOverlay={Boolean(highlightNonAscii)}\n $color={color}\n $isGradient={isGradient}\n $isDisabled={isDisabled}\n $isFocusVisible={isFocusVisible}\n $isInvalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n $isRequired={isRequired}\n $isFocused={Boolean(isFocused || forceColor)}\n $theme={theme}\n $variant={variant}\n className={classNames(TextArea.className, className)}\n ref={ref as MutableRefObject<HTMLDivElement>}\n >\n <fieldset aria-hidden=\"true\" className={`${TextArea.className}-text-area-wrapper__fieldset`}>\n <legend id={labelId} className={`${TextArea.className}-text-area-wrapper-fieldset__legend`}>\n {label ? <span>{label}</span> : null}\n </legend>\n </fieldset>\n {label ? (\n <label className={`${TextArea.className}__label`}>\n <span>{label}</span>\n </label>\n ) : null}\n <div className={`${TextArea.className}__text-area-wrapper`}>\n {leftIcon ? (\n <Icon color={isDisabled ? 'question' : 'black'} {...leftIcon} aria-hidden=\"true\" className=\"left\" />\n ) : null}\n <div className={`${TextArea.className}-text-area-wrapper__text-area`}>\n <div className={`${TextArea.className}-text-area-wrapper-text-area__container`}>\n {highlightOptions ? (\n <div className={`${TextArea.className}-text-area-wrapper__highlight-overlay`} aria-hidden=\"true\">\n {highlightNonAsciiChars((isControlled ? propsValue : value) || '', highlightOptions)}\n </div>\n ) : null}\n <textarea\n {...textareaProps}\n onBlur={(event) => {\n onBlur?.(event);\n onBlurProps?.(event as unknown as FocusEvent<HTMLDivElement, Element>);\n }}\n onFocus={(event) => {\n onFocus?.(event);\n onFocusProps?.(event as unknown as FocusEvent<HTMLDivElement, Element>);\n }}\n aria-disabled={isDisabled}\n aria-invalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby || (label ? labelId : undefined)}\n aria-readonly={isReadOnly}\n aria-required={isRequired}\n // eslint-disable-next-line jsx-a11y/no-autofocus -- forwards the consumer's `autoFocus` prop\n autoFocus={autoFocus}\n disabled={isDisabled}\n name={name}\n onChange={handleChange}\n placeholder={placeholder}\n ref={textareaRef as MutableRefObject<HTMLTextAreaElement>}\n value={isControlled ? propsValue : value}\n rows={rows}\n />\n </div>\n </div>\n {after ? (\n <Flexbox className={`${TextArea.className}-text-area-wrapper__toolbar`} gap=\"8px\">\n {typeof after === 'function'\n ? after(\n isControlled ? propsValue : value,\n isDisabled,\n isInvalid || (isRequired && !(isControlled ? propsValue : value)),\n isRequired\n )\n : after}\n </Flexbox>\n ) : null}\n </div>\n </StyledTextArea>\n );\n});\nTextArea.className = CLASSNAME;\nTextArea.displayName = COMPONENT_NAME;\n"],"names":["useComputeNumberOfRows","minimumRows","rows","setRows","useState","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","TextAreaVariant","default","underline","StyledTextArea","styled","div","baseStyling","_ref","$label","$hasLeftIcon","$hasContent","$hasHighlightOverlay","$isFocused","$isDisabled","$isInvalid","$color","$isGradient","$theme","$variant","css","Theme","dark","resolveBackgroundColor","background","paletteColors","Object","values","NotificationsColorPalette","includes","StyledHighlightMarker","mark","_ref2","$font","$background","$hasInvisible","COMPONENT_NAME","CLASSNAME","highlightNonAsciiChars","text","options","result","currentAscii","currentNonAscii","keyIndex","chars","Array","from","char","isNonAscii","push","React","createElement","key","font","containsInvisibleChars","TextArea","forwardRef","props","ref","propsWithDefaults","_objectSpread","width","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledby","after","autoFocus","className","color","propsColor","defaultValue","forceColor","highlightNonAscii","isColored","isDisabled","isInvalid","isReadOnly","isRequired","label","leftIcon","name","onBlur","onBlurProps","onChange","onFocus","onFocusProps","placeholder","textareaProps","textareaRef","propsTextareaRef","theme","propsTheme","value","propsValue","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","ButtonsColorPalette","isGradient","radar","_textareaRef","useRef","isFocusVisible","isFocused","focusProps","useFocusRing","isFocusWithin","setFocusWithin","Boolean","focusWithinProps","useFocusWithin","onFocusWithinChange","setValue","isControlled","undefined","labelId","useId","highlightOptions","normalizeHighlightOptions","warnIfNoAccessibleLabelFound","handleChange","useCallback","event","useEffect","current","_extends","$isFocusVisible","$isRequired","classNames","id","Icon","disabled","Flexbox","gap","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"TextArea.js","sources":["../../src/hooks/useComputeNumberOfRows.ts","../../src/components/text-area/types.ts","../../src/components/text-area/styles.ts","../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { useState } from 'react';\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nexport const useComputeNumberOfRows = (\n minimumRows: number\n): {\n /** number of rows to be used on the text area */\n rows: number;\n /**\n * Callback in order to recalculate the number of rows due to a change on the text area\n */\n recomputeNumberOfRows(target: Element): void;\n} => {\n const [rows, setRows] = useState(minimumRows);\n\n const recompute = (target: Element) => {\n /**\n * HEAD's UP! This part is a little bit tricky. The idea here is to only\n * display the necessary rows on the textarea. In order to dynamically adjust\n * the height on that field, we need to:\n * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n * by the line height.\n * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n * when we will not see the update and the rows will be resized to the minimum.\n * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n */\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = minimumRows;\n let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = currentRows;\n\n setRows(currentRows);\n };\n\n return {\n recomputeNumberOfRows: recompute,\n rows,\n };\n};\n","import { ChangeEvent, ComponentProps, RefObject } from 'react';\nimport { ValueOf } from '../../types';\nimport { StyledTextFieldProps, TextFieldProps } from '../text-field';\n\n/**\n * Component variant.\n */\nexport const TextAreaVariant = {\n default: 'default',\n underline: 'underline',\n} as const;\nexport type TextAreaVariant = ValueOf<typeof TextAreaVariant>;\n\n/**\n * Component props.\n */\nexport interface TextAreaProps\n extends Omit<\n TextFieldProps,\n 'onChange' | 'inputRef' | 'inputProps' | 'pills' | 'internal' | 'hasClearButton' | 'onClear' | 'labelAfter'\n > {\n /** Custom ref object to pass to the textarea element. */\n textareaRef?: RefObject<HTMLTextAreaElement | null>;\n /** Custom props to pass to the textarea element. */\n textareaProps?: ComponentProps<'textarea'>;\n /** Method to handle component change. */\n onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLTextAreaElement>): void;\n /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n minimumRows?: number;\n}\n\nexport type StyledTextAreaProps = StyledTextFieldProps;\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTextAreaProps, TextAreaVariant } from './types';\nimport { StyledHighlightOverlayProps } from '../text-field/types';\nimport { Theme, NotificationsColorPalette } from '../../types';\n\n/* eslint-disable @redsift/ds/no-outline-none-without-indicator -- the input's own outline is replaced by the field's border, which turns the focus colour through $isFocused */\n/**\n * Component style.\n */\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n height: fit-content;\n position: relative;\n width: fit-content;\n margin: 0;\n min-width: 0;\n padding: 0;\n ${baseStyling}\n\n border: 0;\n display: inline-flex;\n flex-direction: column;\n vertical-align: top;\n\n ${({\n $label,\n $hasLeftIcon,\n $hasContent,\n $hasHighlightOverlay,\n $isFocused,\n $isDisabled,\n $isInvalid,\n $color,\n $isGradient,\n $theme,\n $variant,\n }) => css`\n ${$isDisabled\n ? css`\n pointer-events: none;\n `\n : ''}\n\n .redsift-text-area__label {\n font-family: var(--redsift-typography-input-text-font-family);\n font-size: var(--redsift-typography-input-text-font-size);\n font-weight: var(--redsift-typography-input-text-font-weight);\n line-height: var(--redsift-typography-input-text-line-height);\n left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n text-overflow: ellipsis;\n top: ${$hasContent ? '-8px' : '-6px'};\n transform-origin: top left;\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n white-space: nowrap;\n z-index: 1;\n\n ${!$hasContent\n ? css`\n max-width: calc(100% - 24px);\n transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n `\n : css`\n max-width: calc(133% - 32px);\n transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);\n `}\n\n ${!$isGradient\n ? css`\n color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n ? 'error'\n : $isFocused\n ? $color\n : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n );\n `\n : css`\n background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});\n ${$variant !== TextAreaVariant.underline\n ? css`\n padding-right: 7px;\n padding-left: 5px;\n `\n : ''}\n > span {\n background: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n ? 'error'\n : $isFocused\n ? $color\n : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n );\n background-clip: text;\n color: transparent;\n }\n `}\n }\n\n .redsift-text-area__text-area-wrapper {\n align-items: flex-start;\n box-sizing: border-box;\n cursor: text;\n display: inline-flex;\n min-height: 42px;\n position: relative;\n width: 100%;\n }\n\n .redsift-text-area-text-area-wrapper__text-area {\n flex: 1 1 auto;\n padding-bottom: 9px;\n ${$variant !== TextAreaVariant.underline && !$hasLeftIcon\n ? css`\n padding-left: 16px;\n `\n : ''}\n padding-top: ${$label ? '10px' : '9px'};\n padding-right: 8px;\n }\n\n .redsift-text-area-text-area-wrapper-text-area__container {\n position: relative;\n width: 100%;\n\n textarea {\n background: transparent;\n display: block;\n border: none;\n outline: none;\n width: 100%;\n padding: 0;\n margin: 0;\n box-sizing: content-box;\n font-family: ${$hasHighlightOverlay\n ? 'var(--redsift-typography-font-family-inconsolata)'\n : 'var(--redsift-typography-input-text-font-family)'};\n font-size: 14px;\n font-weight: var(--redsift-typography-input-text-font-weight);\n line-height: var(--redsift-typography-input-text-line-height);\n resize: none;\n position: relative;\n z-index: 1;\n\n ${$isDisabled\n ? css`\n color: var(--redsift-color-neutral-light-grey);\n `\n : $hasHighlightOverlay\n ? css`\n color: transparent;\n caret-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n `\n : css`\n color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n `}\n }\n }\n\n .redsift-text-area-text-area-wrapper__highlight-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n font-family: var(--redsift-typography-font-family-inconsolata);\n font-size: 14px;\n font-weight: var(--redsift-typography-input-text-font-weight);\n line-height: var(--redsift-typography-input-text-line-height);\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow: hidden;\n color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n\n /* Remove padding from marks to maintain exact character alignment with textarea */\n mark {\n padding: 0;\n }\n }\n\n .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area::placeholder {\n color: var(--redsift-color-neutral-mid-grey);\n }\n\n .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area:focus {\n outline: 0;\n }\n\n .redsift-text-area-text-area-wrapper__fieldset {\n border-style: solid;\n bottom: 0;\n left: 1px;\n margin: 0;\n min-width: 0%;\n overflow: hidden;\n padding: 0 8px;\n pointer-events: none;\n position: absolute;\n right: 0;\n text-align: left;\n top: -5px;\n\n ${!$isGradient || $isDisabled || !$isFocused || $isInvalid\n ? css`\n ${$variant === TextAreaVariant.underline\n ? css`\n border-bottom-width: 2px;\n `\n : css`\n border-radius: 4px;\n border-width: 2px;\n `}\n border-color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n ? 'error'\n : $isFocused\n ? $color\n : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n );\n `\n : css`\n ${$variant === TextAreaVariant.underline\n ? css`\n border-bottom: 2px solid transparent;\n `\n : css`\n border: 2px solid transparent;\n border-radius: 4px;\n `}\n background: transparent;\n background-clip: padding-box, border-box;\n background-origin: border-box;\n background-image: linear-gradient(\n 90deg,\n var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),\n var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})\n ),\n var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);\n `}\n }\n\n .redsift-text-area-text-area-wrapper-fieldset__legend {\n display: block;\n float: unset;\n font-size: 11px;\n height: 11px;\n overflow: hidden;\n padding: 0;\n visibility: hidden;\n white-space: nowrap;\n width: auto;\n\n ${!$hasContent\n ? css`\n max-width: 0.01px;\n transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n `\n : css`\n max-width: 100%;\n transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n `}\n }\n\n .redsift-text-area-text-area-wrapper-fieldset__legend > span {\n display: inline-block;\n opacity: 0;\n padding-left: 5px;\n padding-right: 5px;\n visibility: visible;\n }\n\n .redsift-text-area-text-area-wrapper__toolbar {\n position: relative;\n top: 7px;\n }\n\n .redsift-icon-button {\n padding: 2px;\n height: 28px;\n width: 28px;\n }\n\n ${$variant !== TextAreaVariant.underline\n ? css`\n .redsift-icon.left {\n padding-left: 12px;\n padding-right: 8px;\n line-height: 28px;\n top: 10px;\n }\n\n .redsift-text-area-text-area-wrapper__toolbar {\n padding-right: 8px;\n }\n `\n : css`\n .redsift-icon.left {\n padding-right: 8px;\n top: 10px;\n }\n `}\n `}\n`;\n/* eslint-enable @redsift/ds/no-outline-none-without-indicator */\n\n/**\n * Resolves background color from prop value.\n * Handles: boolean (true=warning), palette colors, and custom CSS values.\n */\nconst resolveBackgroundColor = (background: true | string): string => {\n if (background === true) {\n return 'var(--redsift-color-notifications-warning-primary)';\n }\n // Check if it's a notification palette color name\n const paletteColors = Object.values(NotificationsColorPalette);\n if (paletteColors.includes(background as NotificationsColorPalette)) {\n return `var(--redsift-color-notifications-${background}-primary)`;\n }\n // Assume it's a CSS color value (hex, rgb, etc.)\n return background;\n};\n\n/**\n * Styled marker for highlighted non-ASCII characters in TextArea.\n */\nexport const StyledHighlightMarker = styled.mark<StyledHighlightOverlayProps>`\n ${({ $font, $background, $hasInvisible }) => css`\n /* Reset the default <mark> styling */\n background: ${$background ? resolveBackgroundColor($background) : 'transparent'};\n color: inherit;\n border-radius: 2px;\n padding: 0 1px;\n position: relative;\n\n /* Use Inconsolata with bold weight to break kerning and reveal lookalike chars */\n ${$font &&\n css`\n font-family: var(--redsift-typography-font-family-inconsolata);\n font-weight: 700;\n `}\n\n /* Show a visual indicator for invisible/zero-width characters */\n ${$hasInvisible &&\n css`\n &::after {\n content: '•';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n color: var(--redsift-color-neutral-x-dark-grey);\n ${$background &&\n css`\n background-color: ${resolveBackgroundColor($background)};\n opacity: 0.8;\n `}\n border-radius: 2px;\n pointer-events: none;\n }\n `}\n `}\n`;\n","import React, {\n ComponentProps,\n FocusEvent,\n forwardRef,\n MutableRefObject,\n ReactNode,\n useCallback,\n useEffect,\n useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { useFocusWithin } from '../../react-aria/react-aria/interactions';\nimport { ButtonsColorPalette, Comp, getStylingTransientProps } from '../../types';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport {\n isNonAscii,\n containsInvisibleChars,\n normalizeHighlightOptions,\n NormalizedHighlightOptions,\n} from '../../utils/highlightNonAscii';\nimport { TextAreaProps, TextAreaVariant } from './types';\nimport { StyledTextArea, StyledHighlightMarker } from './styles';\nimport { Icon } from '../../components/icon';\nimport { useTheme } from '../theme';\nimport { useComputeNumberOfRows } from '../../hooks';\nimport { useId } from '../../utils';\nimport { Flexbox } from '../flexbox';\n\nconst COMPONENT_NAME = 'TextArea';\nconst CLASSNAME = 'redsift-text-area';\n\n/**\n * Processes a string and wraps consecutive non-ASCII characters in highlight markers.\n * Groups consecutive non-ASCII characters to minimize DOM nodes.\n * Invisible characters are NOT replaced (to maintain width alignment) but marked\n * with a $hasInvisible prop for CSS-based visual indication.\n */\nconst highlightNonAsciiChars = (text: string, options: NormalizedHighlightOptions): ReactNode[] => {\n const result: ReactNode[] = [];\n let currentAscii = '';\n let currentNonAscii = '';\n let keyIndex = 0;\n\n // Use Array.from to correctly handle Unicode surrogate pairs (e.g., emojis)\n const chars = Array.from(text);\n\n for (const char of chars) {\n if (isNonAscii(char)) {\n // Flush ASCII buffer\n if (currentAscii) {\n result.push(currentAscii);\n currentAscii = '';\n }\n currentNonAscii += char;\n } else {\n // Flush non-ASCII buffer\n if (currentNonAscii) {\n result.push(\n <StyledHighlightMarker\n key={keyIndex++}\n $font={options.font}\n $background={options.background}\n $hasInvisible={containsInvisibleChars(currentNonAscii)}\n >\n {currentNonAscii}\n </StyledHighlightMarker>\n );\n currentNonAscii = '';\n }\n currentAscii += char;\n }\n }\n\n // Flush remaining buffers\n if (currentAscii) {\n result.push(currentAscii);\n }\n if (currentNonAscii) {\n result.push(\n <StyledHighlightMarker\n key={keyIndex}\n $font={options.font}\n $background={options.background}\n $hasInvisible={containsInvisibleChars(currentNonAscii)}\n >\n {currentNonAscii}\n </StyledHighlightMarker>\n );\n }\n\n return result;\n};\n\n/**\n * TextArea allows users to enter multi-line text. Supports auto-growing height,\n * validation, and controlled/uncontrolled modes.\n *\n * @example\n * // Basic text area\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * @example\n * // Controlled with validation\n * <TextArea\n * label=\"Comments\"\n * value={comments}\n * onChange={setComments}\n * isInvalid={comments.length > 500}\n * isRequired\n * />\n *\n * @example\n * // Auto-growing with minimum rows\n * <TextArea label=\"Message\" minimumRows={3} />\n *\n * @example\n * // With icon and variant\n * <TextArea\n * label=\"Notes\"\n * variant=\"underline\"\n * leftIcon={{ icon: mdiNote }}\n * />\n */\nexport const TextArea: Comp<TextAreaProps, HTMLDivElement> = forwardRef((props, ref) => {\n const propsWithDefaults = {\n width: '100%' as const,\n ...props,\n };\n\n const { transientProps, otherProps } = getStylingTransientProps(propsWithDefaults);\n\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n after,\n autoFocus,\n className,\n color: propsColor,\n defaultValue = '',\n forceColor,\n highlightNonAscii,\n isColored = true,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n label,\n leftIcon,\n minimumRows,\n name,\n onBlur: onBlurProps,\n onChange,\n onFocus: onFocusProps,\n placeholder,\n textareaProps,\n textareaRef: propsTextareaRef,\n theme: propsTheme,\n value: propsValue,\n variant = TextAreaVariant.default,\n ...forwardedProps\n } = otherProps;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : isColored ? 'primary' : 'grey';\n const isGradient = color === ButtonsColorPalette.radar;\n\n const _textareaRef = React.useRef(null);\n const textareaRef = propsTextareaRef ?? _textareaRef;\n\n const {\n isFocusVisible,\n isFocused,\n focusProps: { onFocus, onBlur },\n } = useFocusRing({\n autoFocus,\n });\n const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));\n const { focusWithinProps } = useFocusWithin({\n onFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n });\n\n const [value, setValue] = useState(defaultValue);\n const isControlled = propsValue !== null && propsValue !== undefined;\n\n const [labelId] = useId();\n\n // Normalize highlight options - force font: false since the textarea uses Inconsolata directly\n const highlightOptions = highlightNonAscii ? { ...normalizeHighlightOptions(highlightNonAscii), font: false } : null;\n\n warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [label], 'TextArea');\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n if (onChange) {\n onChange(event.target.value, name, event);\n } else {\n setValue(event.target.value);\n }\n },\n [onChange]\n );\n\n const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(minimumRows || 4);\n useEffect(() => {\n // Recompute the number of rows for the first rendering\n if (textareaRef && textareaRef.current) {\n recomputeNumberOfRows(textareaRef.current);\n }\n }, [textareaRef, recomputeNumberOfRows, value]);\n\n return (\n <StyledTextArea\n {...focusWithinProps}\n {...forwardedProps}\n {...transientProps}\n $label={label}\n $hasContent={isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder)}\n $hasLeftIcon={Boolean(leftIcon)}\n $hasHighlightOverlay={Boolean(highlightNonAscii)}\n $color={color}\n $isGradient={isGradient}\n $isDisabled={isDisabled}\n $isFocusVisible={isFocusVisible}\n $isInvalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n $isRequired={isRequired}\n $isFocused={Boolean(isFocused || forceColor)}\n $theme={theme}\n $variant={variant}\n className={classNames(TextArea.className, className)}\n ref={ref as MutableRefObject<HTMLDivElement>}\n >\n <fieldset aria-hidden=\"true\" className={`${TextArea.className}-text-area-wrapper__fieldset`}>\n <legend id={labelId} className={`${TextArea.className}-text-area-wrapper-fieldset__legend`}>\n {label ? <span>{label}</span> : null}\n </legend>\n </fieldset>\n {label ? (\n <label className={`${TextArea.className}__label`}>\n <span>{label}</span>\n </label>\n ) : null}\n <div className={`${TextArea.className}__text-area-wrapper`}>\n {leftIcon ? (\n <Icon color={isDisabled ? 'question' : 'black'} {...leftIcon} aria-hidden=\"true\" className=\"left\" />\n ) : null}\n <div className={`${TextArea.className}-text-area-wrapper__text-area`}>\n <div className={`${TextArea.className}-text-area-wrapper-text-area__container`}>\n {highlightOptions ? (\n <div className={`${TextArea.className}-text-area-wrapper__highlight-overlay`} aria-hidden=\"true\">\n {highlightNonAsciiChars((isControlled ? propsValue : value) || '', highlightOptions)}\n </div>\n ) : null}\n <textarea\n {...textareaProps}\n onBlur={(event) => {\n onBlur?.(event);\n onBlurProps?.(event as unknown as FocusEvent<HTMLDivElement, Element>);\n }}\n onFocus={(event) => {\n onFocus?.(event);\n onFocusProps?.(event as unknown as FocusEvent<HTMLDivElement, Element>);\n }}\n aria-disabled={isDisabled}\n aria-invalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby || (label ? labelId : undefined)}\n aria-readonly={isReadOnly}\n aria-required={isRequired}\n // eslint-disable-next-line jsx-a11y/no-autofocus -- forwards the consumer's `autoFocus` prop\n autoFocus={autoFocus}\n disabled={isDisabled}\n name={name}\n onChange={handleChange}\n placeholder={placeholder}\n ref={textareaRef as MutableRefObject<HTMLTextAreaElement>}\n value={isControlled ? propsValue : value}\n rows={rows}\n />\n </div>\n </div>\n {after ? (\n <Flexbox className={`${TextArea.className}-text-area-wrapper__toolbar`} gap=\"8px\">\n {typeof after === 'function'\n ? after(\n isControlled ? propsValue : value,\n isDisabled,\n isInvalid || (isRequired && !(isControlled ? propsValue : value)),\n isRequired\n )\n : after}\n </Flexbox>\n ) : null}\n </div>\n </StyledTextArea>\n );\n});\nTextArea.className = CLASSNAME;\nTextArea.displayName = COMPONENT_NAME;\n"],"names":["useComputeNumberOfRows","minimumRows","rows","setRows","useState","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","TextAreaVariant","default","underline","StyledTextArea","styled","div","baseStyling","_ref","$label","$hasLeftIcon","$hasContent","$hasHighlightOverlay","$isFocused","$isDisabled","$isInvalid","$color","$isGradient","$theme","$variant","css","Theme","dark","resolveBackgroundColor","background","paletteColors","Object","values","NotificationsColorPalette","includes","StyledHighlightMarker","mark","_ref2","$font","$background","$hasInvisible","COMPONENT_NAME","CLASSNAME","highlightNonAsciiChars","text","options","result","currentAscii","currentNonAscii","keyIndex","chars","Array","from","char","isNonAscii","push","React","createElement","key","font","containsInvisibleChars","TextArea","forwardRef","props","ref","propsWithDefaults","_objectSpread","width","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledby","after","autoFocus","className","color","propsColor","defaultValue","forceColor","highlightNonAscii","isColored","isDisabled","isInvalid","isReadOnly","isRequired","label","leftIcon","name","onBlur","onBlurProps","onChange","onFocus","onFocusProps","placeholder","textareaProps","textareaRef","propsTextareaRef","theme","propsTheme","value","propsValue","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","ButtonsColorPalette","isGradient","radar","_textareaRef","useRef","isFocusVisible","isFocused","focusProps","useFocusRing","isFocusWithin","setFocusWithin","Boolean","focusWithinProps","useFocusWithin","onFocusWithinChange","setValue","isControlled","undefined","labelId","useId","highlightOptions","normalizeHighlightOptions","warnIfNoAccessibleLabelFound","handleChange","useCallback","event","useEffect","current","_extends","$isFocusVisible","$isRequired","classNames","id","Icon","disabled","Flexbox","gap","displayName"],"mappings":"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"}
package/_internal/TextField.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { b as _objectWithoutProperties, a as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
2
- import React__default, { forwardRef, useState, useCallback } from 'react';
2
+ import React__default, { forwardRef, useState, useCallback, useRef } from 'react';
3
3
  import classNames from 'classnames';
4
4
  import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
5
5
  import { n as normalizeHighlightOptions, i as isNonAscii, c as containsInvisibleChars } from './highlightNonAscii.js';
@@ -8,7 +8,7 @@ import { i as baseStyling } from './styles5.js';
8
8
  import { T as Theme, N as NotificationsColorPalette, B as ButtonsColorPalette } from './colors.js';
9
9
  import { mdiClose } from '@redsift/icons';
10
10
  import { u as useMessageFormatter } from './useMessageFormatter.js';
11
- import { u as useFocusRing, a as useFocusWithin } from './useFocusRing.js';
11
+ import { u as useFocusRing, a as useFocusWithin, b as useLayoutEffect } from './useFocusRing.js';
12
12
  import { f as getStylingTransientProps } from './styles.js';
13
13
  import { u as useTheme } from './useTheme.js';
14
14
  import { u as useId } from './useId.js';
@@ -40,6 +40,12 @@ const TextFieldPillsLayout = {
40
40
  * Component props.
41
41
  */
42
42
 
43
+ /** Scale of the label once it moves onto the border; the legend's 11px font reserves the notch at that size. */
44
+ const LABEL_SHRINK_SCALE = 0.733;
45
+
46
+ /** Keeps a rule meant for the field's own icons and buttons off `labelAfter` content; :where() adds no specificity. */
47
+ const OUTSIDE_LABEL_AFTER = ':not(:where(.redsift-text-field__label-after *))';
48
+
43
49
  /* eslint-disable @redsift/ds/no-outline-none-without-indicator -- the input's own outline is replaced by the field's border, which turns the focus colour through $isFocused */
44
50
  /**
45
51
  * Component style.
@@ -64,6 +70,7 @@ const StyledTextField = styled.div`
64
70
  $hasLeftIcon,
65
71
  $hasContent,
66
72
  $hasHighlightOverlay,
73
+ $hasLabelAfter,
67
74
  $isFocused,
68
75
  $isDisabled,
69
76
  $isInvalid,
@@ -100,9 +107,23 @@ const StyledTextField = styled.div`
100
107
  transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
101
108
  ` : css`
102
109
  max-width: calc(133% - 32px);
103
- transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);
110
+ transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 1px)
111
+ scale(${LABEL_SHRINK_SCALE});
104
112
  `}
105
113
 
114
+ ${$hasLabelAfter ? css`
115
+ /* The text ellipsizes instead, so a long label never clips the addon or its focus indicator. */
116
+ align-items: center;
117
+ display: flex;
118
+ overflow: visible;
119
+
120
+ > span {
121
+ min-width: 0;
122
+ overflow: hidden;
123
+ text-overflow: ellipsis;
124
+ }
125
+ ` : ''}
126
+
106
127
  ${!$isGradient ? css`
107
128
  color: var(
108
129
  --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
@@ -134,6 +155,37 @@ const StyledTextField = styled.div`
134
155
  color: inherit;
135
156
  }
136
157
 
158
+ /* Zero height keeps content taller than the label text, such as an icon button, from moving the text off the border.
159
+ pointer-events: auto also overrides the disabled field's none on purpose: help about a field stays available
160
+ while the field is disabled. */
161
+ .redsift-text-field__label-after {
162
+ align-items: center;
163
+ display: flex;
164
+ flex: none;
165
+ height: 0;
166
+ padding-left: 4px;
167
+ pointer-events: auto;
168
+ }
169
+
170
+ /* Sized to its icon so the notch stays tight; ::after keeps a target of 24px, the WCAG 2.5.8 minimum, once
171
+ scaled with the label. */
172
+ .redsift-text-field__label-after .redsift-icon-button {
173
+ height: auto;
174
+ padding: 0;
175
+ position: relative;
176
+ width: auto;
177
+
178
+ &::after {
179
+ content: '';
180
+ height: calc(24px / ${LABEL_SHRINK_SCALE});
181
+ left: 50%;
182
+ position: absolute;
183
+ top: 50%;
184
+ transform: translate(-50%, -50%);
185
+ width: calc(24px / ${LABEL_SHRINK_SCALE});
186
+ }
187
+ }
188
+
137
189
  .redsift-text-field__input-wrapper {
138
190
  align-items: flex-start;
139
191
  box-sizing: border-box;
@@ -348,7 +400,7 @@ const StyledTextField = styled.div`
348
400
  top: 9px;
349
401
  }
350
402
 
351
- .redsift-icon-button:not(.redsift-pill > .redsift-icon-button) {
403
+ .redsift-icon-button:not(.redsift-pill > .redsift-icon-button)${OUTSIDE_LABEL_AFTER} {
352
404
  padding: 2px;
353
405
  position: relative;
354
406
  top: -2px;
@@ -357,7 +409,7 @@ const StyledTextField = styled.div`
357
409
  }
358
410
 
359
411
  ${$variant !== TextFieldVariant.underline ? css`
360
- .redsift-icon.left {
412
+ .redsift-icon.left${OUTSIDE_LABEL_AFTER} {
361
413
  padding-left: 12px;
362
414
  padding-right: 8px;
363
415
  line-height: 28px;
@@ -367,13 +419,13 @@ const StyledTextField = styled.div`
367
419
  padding-right: 8px;
368
420
  }
369
421
  ` : css`
370
- .redsift-icon.left {
422
+ .redsift-icon.left${OUTSIDE_LABEL_AFTER} {
371
423
  padding-right: 8px;
372
424
  }
373
425
  `}
374
426
 
375
- .redsift-icon.left,
376
- .redsift-icon.right {
427
+ .redsift-icon.left${OUTSIDE_LABEL_AFTER},
428
+ .redsift-icon.right${OUTSIDE_LABEL_AFTER} {
377
429
  top: 9px;
378
430
  }
379
431
  `;
@@ -460,7 +512,7 @@ var intlMessages = {
460
512
  'fr-FR': frFR
461
513
  };
462
514
 
463
- const _excluded = ["aria-label", "aria-labelledby", "after", "autoFocus", "className", "color", "defaultValue", "forceColor", "hasClearButton", "highlightNonAscii", "inputProps", "inputRef", "internal", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "pills", "pillsLayout", "placeholder", "theme", "type", "value", "variant"];
515
+ const _excluded = ["aria-label", "aria-labelledby", "after", "autoFocus", "className", "color", "defaultValue", "forceColor", "hasClearButton", "highlightNonAscii", "inputProps", "inputRef", "internal", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "labelAfter", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "pills", "pillsLayout", "placeholder", "theme", "type", "value", "variant"];
464
516
  const COMPONENT_NAME = 'TextField';
465
517
  const CLASSNAME = 'redsift-text-field';
466
518
 
@@ -606,6 +658,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
606
658
  isReadOnly,
607
659
  isRequired,
608
660
  label,
661
+ labelAfter,
609
662
  leftIcon,
610
663
  name,
611
664
  onBlur: onBlurProps,
@@ -683,11 +736,38 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
683
736
  className: `${TextField.className}__asterisk`,
684
737
  "aria-hidden": "true"
685
738
  }, "*") : null;
739
+
740
+ // `0` renders, so it counts; `null`, `undefined`, booleans and `''` render nothing.
741
+ const hasLabelAfter = Boolean(label) && labelAfter != null && typeof labelAfter !== 'boolean' && labelAfter !== '';
742
+ const labelAfterRef = useRef(null);
743
+ // Undefined until measured. The server cannot measure, so the addon stays hidden until the client has widened the
744
+ // notch for it, rather than showing with the border running through it.
745
+ const [labelAfterWidth, setLabelAfterWidth] = useState();
746
+
747
+ // A layout effect measures before the first paint, so the border never crosses the addon.
748
+ useLayoutEffect(() => {
749
+ const el = labelAfterRef.current;
750
+ if (!el) return;
751
+
752
+ // offsetWidth ignores the label's scale transform; the legend spacer applies it.
753
+ const measure = () => setLabelAfterWidth(el.offsetWidth);
754
+ measure();
755
+ if (typeof ResizeObserver === 'undefined') return;
756
+ const observer = new ResizeObserver(measure);
757
+ observer.observe(el);
758
+ return () => observer.disconnect();
759
+ }, [hasLabelAfter]);
760
+
761
+ // A `<label>` with no `for` labels its first control, which would be the addon's.
762
+ const LabelElement = hasLabelAfter ? 'div' : 'label';
686
763
  return /*#__PURE__*/React__default.createElement(StyledTextField, _extends({}, focusWithinProps, forwardedProps, transientProps, {
687
- $label: label,
688
- $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder) || Boolean(pills && pills.length > 0),
764
+ $label: label
765
+ // Focusing the addon must not shrink the label and move the addon out from under the pointer mid-click.
766
+ ,
767
+ $hasContent: hasLabelAfter || isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder) || Boolean(pills && pills.length > 0),
689
768
  $hasLeftIcon: Boolean(leftIcon),
690
769
  $hasHighlightOverlay: Boolean(highlightNonAscii),
770
+ $hasLabelAfter: hasLabelAfter,
691
771
  $color: color,
692
772
  $isGradient: isGradient,
693
773
  $isDisabled: isDisabled,
@@ -706,9 +786,20 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
706
786
  }, /*#__PURE__*/React__default.createElement("legend", {
707
787
  id: labelId,
708
788
  className: `${TextField.className}-input-wrapper-fieldset__legend`
709
- }, label ? /*#__PURE__*/React__default.createElement("span", null, label, requiredMark) : null)), label ? /*#__PURE__*/React__default.createElement("label", {
789
+ }, label ? /*#__PURE__*/React__default.createElement("span", null, label, requiredMark, hasLabelAfter ? /*#__PURE__*/React__default.createElement("span", {
790
+ style: {
791
+ display: 'inline-block',
792
+ width: (labelAfterWidth !== null && labelAfterWidth !== void 0 ? labelAfterWidth : 0) * LABEL_SHRINK_SCALE
793
+ }
794
+ }) : null) : null)), label ? /*#__PURE__*/React__default.createElement(LabelElement, {
710
795
  className: `${TextField.className}__label`
711
- }, /*#__PURE__*/React__default.createElement("span", null, label, requiredMark)) : null, /*#__PURE__*/React__default.createElement("div", {
796
+ }, /*#__PURE__*/React__default.createElement("span", null, label, requiredMark), hasLabelAfter ? /*#__PURE__*/React__default.createElement("div", {
797
+ ref: labelAfterRef,
798
+ className: `${TextField.className}__label-after`,
799
+ style: labelAfterWidth === undefined ? {
800
+ visibility: 'hidden'
801
+ } : undefined
802
+ }, labelAfter) : null) : null, /*#__PURE__*/React__default.createElement("div", {
712
803
  className: `${TextField.className}__input-wrapper`
713
804
  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
714
805
  color: isDisabled ? 'question' : 'black'
@@ -780,5 +871,5 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
780
871
  TextField.className = CLASSNAME;
781
872
  TextField.displayName = COMPONENT_NAME;
782
873
 
783
- export { StyledTextField as S, TextFieldVariant as T, TextFieldPillsLayout as a, StyledHighlightMarker as b, TextField as c };
874
+ export { LABEL_SHRINK_SCALE as L, StyledTextField as S, TextFieldVariant as T, TextFieldPillsLayout as a, StyledHighlightMarker as b, TextField as c };
784
875
  //# sourceMappingURL=TextField.js.map