npm - @neo4j-ndl/react - Versions diffs - 4.21.2 → 4.22.1 - Mend

@neo4j-ndl/react 4.21.2 → 4.22.1

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 (185) hide show

package/lib/esm/select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport ReactSelect, { type GroupBase } from 'react-select';\nimport AsyncSelect from 'react-select/async';\n/* Different types of select components /\nimport Creatable from 'react-select/creatable';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { Typography } from '../typography';\nimport {\n CustomClearIndication,\n CustomControl,\n CustomIndicatorsContainer,\n CustomInput,\n CustomMenu,\n CustomMenuList,\n CustomMenuPortal,\n CustomMultiValue,\n CustomOption,\n CustomPlaceholder,\n CustomSingleValue,\n CustomValueContainer,\n DropdownIndicatorCurrying,\n} from './Overrides';\nimport { type SelectOverrideCustomProps, type SelectProps } from './types';\n\n/\n \n \n Helpers\n \n \n /\n\nconst overrideComponents = <\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n>(\n props: SelectOverrideCustomProps<OptionType, IsMulti, GroupType>,\n) =>\n ({\n ClearIndicator: CustomClearIndication(props),\n Control: CustomControl(props),\n DropdownIndicator: DropdownIndicatorCurrying(props),\n IndicatorSeparator: null,\n IndicatorsContainer: CustomIndicatorsContainer(props),\n Input: CustomInput(props),\n Menu: CustomMenu(props),\n MenuList: CustomMenuList(props),\n MenuPortal: CustomMenuPortal(props),\n MultiValue: CustomMultiValue(props),\n Option: CustomOption(props),\n Placeholder: CustomPlaceholder(props),\n SingleValue: CustomSingleValue(props),\n ValueContainer: CustomValueContainer(props),\n }) as SelectProps<\n OptionType,\n IsMulti,\n GroupType\n >['selectProps']['components'];\n\nconst customStyles = <\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n>() => {\n return {\n clearIndicator: () => ({}),\n control: () => ({}),\n dropdownIndicator: () => ({}),\n indicatorsContainer: () => ({}),\n input: () => ({}),\n menu: (provided) => ({\n bottom: provided.bottom,\n top: provided.top,\n }),\n menuList: (provided) => ({\n maxHeight: provided.maxHeight,\n minHeight: provided.minHeight,\n }),\n menuPortal: (provided) => ({\n ...provided,\n zIndex: tokens.zIndex.popover,\n }),\n option: () => ({}),\n placeholder: () => ({}),\n singleValue: () => ({}),\n valueContainer: (provided) => ({\n ...provided,\n padding: '0',\n }),\n } as SelectProps<OptionType, IsMulti, GroupType>['selectProps']['styles'];\n};\n\n/\n @deprecated Use `Combobox` instead. This component will be removed in a future release.\n */\nexport const Select = <\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n T extends React.ElementType = 'div',\n>({\n as,\n label,\n helpText,\n errorText,\n isFluid = true,\n size = 'medium',\n type = 'select',\n ariaLabel,\n selectProps = {},\n isClean = false,\n isDisabled,\n htmlAttributes,\n className,\n style,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SelectProps<OptionType, IsMulti, GroupType>>) => {\n const isInsideDialog = useIsInsideDialog();\n const menuPosition = isInsideDialog ? 'fixed' : 'absolute';\n const identifier = useId();\n const helpTextId = useId();\n const errorTextId = useId();\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const handleMenuOpen = () => {\n setIsMenuOpen(true);\n if (selectProps.onMenuOpen) {\n selectProps.onMenuOpen();\n }\n };\n\n const handleMenuClose = () => {\n setIsMenuOpen(false);\n if (selectProps.onMenuClose) {\n selectProps.onMenuClose();\n }\n };\n\n // Handle Escape and Enter key to prevent it from bubbling up to dialog\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (\n (event.key === 'Escape' && isMenuOpen) \|\|\n (event.key === 'Enter' && isMenuOpen)\n ) {\n event.stopPropagation();\n }\n\n if (selectProps.onKeyDown) {\n selectProps.onKeyDown(event);\n }\n };\n\n const Component: React.ElementType = as ?? 'div';\n\n const ComponentOverrides = useMemo(\n () =>\n overrideComponents<OptionType, IsMulti, GroupType>({\n errorText,\n errorTextId,\n helpText,\n helpTextId,\n isClean,\n size,\n }),\n [errorText, errorTextId, helpText, helpTextId, size, isClean],\n );\n\n const StyleOverrides = useMemo(\n () => customStyles<OptionType, IsMulti, GroupType>(),\n [],\n );\n\n useEffect(() => {\n if (label === undefined && ariaLabel === undefined) {\n needleWarningMessage(\n 'A Select needs to have a label or an aria label to be accessible. link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n }, [label, ariaLabel]);\n\n let SelectElement: React.JSX.Element;\n switch (type) {\n case 'async': {\n SelectElement = (\n <AsyncSelect\n name={identifier}\n inputId={identifier}\n isDisabled={Boolean(isDisabled) \|\| selectProps.isDisabled}\n menuPlacement=\"auto\"\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n {...selectProps}\n onKeyDown={handleKeyDown}\n onMenuOpen={handleMenuOpen}\n onMenuClose={handleMenuClose}\n menuPosition={selectProps.menuPosition ?? menuPosition}\n hideSelectedOptions={false}\n closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n styles={{ ...StyleOverrides, ...selectProps.styles }}\n components={{ ...ComponentOverrides, ...selectProps.components }}\n />\n );\n break;\n }\n case 'creatable':\n SelectElement = (\n <Creatable\n name={identifier}\n inputId={identifier}\n isDisabled={Boolean(isDisabled) \|\| selectProps.isDisabled}\n menuPlacement=\"auto\"\n {...selectProps}\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n onKeyDown={handleKeyDown}\n onMenuOpen={handleMenuOpen}\n onMenuClose={handleMenuClose}\n menuPosition={selectProps.menuPosition ?? menuPosition}\n hideSelectedOptions={false}\n closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n styles={{ ...StyleOverrides, ...selectProps.styles }}\n components={{ ...ComponentOverrides, ...selectProps.components }}\n />\n );\n break;\n default:\n SelectElement = (\n <ReactSelect\n name={identifier}\n inputId={identifier}\n isDisabled={Boolean(isDisabled) \|\| selectProps.isDisabled}\n menuPlacement=\"auto\"\n {...selectProps}\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n onKeyDown={handleKeyDown}\n onMenuOpen={handleMenuOpen}\n onMenuClose={handleMenuClose}\n menuPosition={selectProps.menuPosition ?? menuPosition}\n hideSelectedOptions={false}\n closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n styles={{ ...StyleOverrides, ...selectProps.styles }}\n components={{ ...ComponentOverrides, ...selectProps.components }}\n />\n );\n }\n\n const classes = classNames('ndl-select', className, {\n 'ndl-creatable': type === 'creatable',\n 'ndl-disabled': selectProps.isDisabled,\n 'ndl-fluid': isFluid,\n 'ndl-has-error': Boolean(errorText),\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-multi': selectProps.isMulti,\n 'ndl-small': size === 'small',\n });\n\n return (\n <Component\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {Boolean(label) && <label htmlFor={identifier}>{label}</label>}\n {SelectElement}\n {Boolean(helpText) && Boolean(errorText) === false && (\n <Typography\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n className=\"ndl-sub-text\"\n htmlAttributes={{ id: helpTextId }}\n >\n {helpText}\n </Typography>\n )}\n {Boolean(errorText) && (\n <div className=\"n-flex n-flex-row n-gap-token-4 n-items-center\">\n <ExclamationCircleIconSolid\n className=\"ndl-error-icon\"\n htmlAttributes={{ role: 'img', type: 'solid' }}\n />\n <span id={errorTextId} className=\"ndl-sub-text ndl-error-text\">\n {errorText}\n </span>\n </div>\n )}\n </Component>\n );\n};\n"]}
1	+ {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport ReactSelect, { type GroupBase } from 'react-select';\nimport AsyncSelect from 'react-select/async';\n/* Different types of select components /\nimport Creatable from 'react-select/creatable';\n\nimport {\n FormFieldLabel,\n FormFieldMessage,\n useFormField,\n} from '../_common/form-control';\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport {\n CustomClearIndication,\n CustomControl,\n CustomIndicatorsContainer,\n CustomInput,\n CustomMenu,\n CustomMenuList,\n CustomMenuPortal,\n CustomMultiValue,\n CustomOption,\n CustomPlaceholder,\n CustomSingleValue,\n CustomValueContainer,\n DropdownIndicatorCurrying,\n} from './Overrides';\nimport { type SelectOverrideCustomProps, type SelectProps } from './types';\n\n/\n \n \n Helpers\n \n \n /\n\nconst overrideComponents = <\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n>(\n props: SelectOverrideCustomProps<OptionType, IsMulti, GroupType>,\n) =>\n ({\n ClearIndicator: CustomClearIndication(props),\n Control: CustomControl(props),\n DropdownIndicator: DropdownIndicatorCurrying(props),\n IndicatorSeparator: null,\n IndicatorsContainer: CustomIndicatorsContainer(props),\n Input: CustomInput(props),\n Menu: CustomMenu(props),\n MenuList: CustomMenuList(props),\n MenuPortal: CustomMenuPortal(props),\n MultiValue: CustomMultiValue(props),\n Option: CustomOption(props),\n Placeholder: CustomPlaceholder(props),\n SingleValue: CustomSingleValue(props),\n ValueContainer: CustomValueContainer(props),\n }) as SelectProps<\n OptionType,\n IsMulti,\n GroupType\n >['selectProps']['components'];\n\nconst customStyles = <\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n>() => {\n return {\n clearIndicator: () => ({}),\n control: () => ({}),\n dropdownIndicator: () => ({}),\n indicatorsContainer: () => ({}),\n input: () => ({}),\n menu: (provided) => ({\n bottom: provided.bottom,\n top: provided.top,\n }),\n menuList: (provided) => ({\n maxHeight: provided.maxHeight,\n minHeight: provided.minHeight,\n }),\n menuPortal: (provided) => ({\n ...provided,\n zIndex: tokens.zIndex.popover,\n }),\n option: () => ({}),\n placeholder: () => ({}),\n singleValue: () => ({}),\n valueContainer: (provided) => ({\n ...provided,\n padding: '0',\n }),\n } as SelectProps<OptionType, IsMulti, GroupType>['selectProps']['styles'];\n};\n\n/\n @deprecated Use `Combobox` instead. This component will be removed in a future release.\n */\nexport const Select = <\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n T extends React.ElementType = 'div',\n>({\n as,\n label,\n helpText,\n errorText,\n isFluid = true,\n size = 'medium',\n type = 'select',\n ariaLabel,\n selectProps = {},\n isClean = false,\n isDisabled,\n htmlAttributes,\n className,\n style,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SelectProps<OptionType, IsMulti, GroupType>>) => {\n const isInsideDialog = useIsInsideDialog();\n const menuPosition = isInsideDialog ? 'fixed' : 'absolute';\n const identifier = useId();\n // The shared form field resolves the ids and which message is displayed -\n // an error always replaces the help text. Select has no required support;\n // it is deprecated in favor of Combobox, which has isRequired and\n // hasRequiredIndicator.\n const { field } = useFormField({\n controlId: identifier,\n errorText,\n helpText,\n label,\n });\n const helpTextId = field.helpTextId;\n const errorTextId = field.errorTextId;\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const handleMenuOpen = () => {\n setIsMenuOpen(true);\n if (selectProps.onMenuOpen) {\n selectProps.onMenuOpen();\n }\n };\n\n const handleMenuClose = () => {\n setIsMenuOpen(false);\n if (selectProps.onMenuClose) {\n selectProps.onMenuClose();\n }\n };\n\n // Handle Escape and Enter key to prevent it from bubbling up to dialog\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (\n (event.key === 'Escape' && isMenuOpen) \|\|\n (event.key === 'Enter' && isMenuOpen)\n ) {\n event.stopPropagation();\n }\n\n if (selectProps.onKeyDown) {\n selectProps.onKeyDown(event);\n }\n };\n\n const Component: React.ElementType = as ?? 'div';\n\n const ComponentOverrides = useMemo(\n () =>\n overrideComponents<OptionType, IsMulti, GroupType>({\n errorText,\n errorTextId,\n helpText,\n helpTextId,\n isClean,\n size,\n }),\n [errorText, errorTextId, helpText, helpTextId, size, isClean],\n );\n\n const StyleOverrides = useMemo(\n () => customStyles<OptionType, IsMulti, GroupType>(),\n [],\n );\n\n useEffect(() => {\n if (label === undefined && ariaLabel === undefined) {\n needleWarningMessage(\n 'A Select needs to have a label or an aria label to be accessible. link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n }, [label, ariaLabel]);\n\n let SelectElement: React.JSX.Element;\n switch (type) {\n case 'async': {\n SelectElement = (\n <AsyncSelect\n name={identifier}\n inputId={identifier}\n isDisabled={Boolean(isDisabled) \|\| selectProps.isDisabled}\n menuPlacement=\"auto\"\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n {...selectProps}\n onKeyDown={handleKeyDown}\n onMenuOpen={handleMenuOpen}\n onMenuClose={handleMenuClose}\n menuPosition={selectProps.menuPosition ?? menuPosition}\n hideSelectedOptions={false}\n closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n styles={{ ...StyleOverrides, ...selectProps.styles }}\n components={{ ...ComponentOverrides, ...selectProps.components }}\n />\n );\n break;\n }\n case 'creatable':\n SelectElement = (\n <Creatable\n name={identifier}\n inputId={identifier}\n isDisabled={Boolean(isDisabled) \|\| selectProps.isDisabled}\n menuPlacement=\"auto\"\n {...selectProps}\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n onKeyDown={handleKeyDown}\n onMenuOpen={handleMenuOpen}\n onMenuClose={handleMenuClose}\n menuPosition={selectProps.menuPosition ?? menuPosition}\n hideSelectedOptions={false}\n closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n styles={{ ...StyleOverrides, ...selectProps.styles }}\n components={{ ...ComponentOverrides, ...selectProps.components }}\n />\n );\n break;\n default:\n SelectElement = (\n <ReactSelect\n name={identifier}\n inputId={identifier}\n isDisabled={Boolean(isDisabled) \|\| selectProps.isDisabled}\n menuPlacement=\"auto\"\n {...selectProps}\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n onKeyDown={handleKeyDown}\n onMenuOpen={handleMenuOpen}\n onMenuClose={handleMenuClose}\n menuPosition={selectProps.menuPosition ?? menuPosition}\n hideSelectedOptions={false}\n closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n styles={{ ...StyleOverrides, ...selectProps.styles }}\n components={{ ...ComponentOverrides, ...selectProps.components }}\n />\n );\n }\n\n const classes = classNames('ndl-select', className, {\n 'ndl-creatable': type === 'creatable',\n 'ndl-disabled': selectProps.isDisabled,\n 'ndl-fluid': isFluid,\n 'ndl-has-error': Boolean(errorText),\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-multi': selectProps.isMulti,\n 'ndl-small': size === 'small',\n });\n\n return (\n <Component\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {Boolean(label) && <FormFieldLabel field={field} size={size} />}\n {SelectElement}\n <FormFieldMessage field={field} size={size} />\n </Component>\n );\n};\n"]}

package/lib/esm/select/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/select/types.tsx"],"names":[],"mappings":"","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { type ReactNode } from 'react';\nimport { type GroupBase, type Props } from 'react-select';\nimport { type AsyncProps } from 'react-select/async';\nimport { type CreatableProps } from 'react-select/creatable';\n\nexport type SelectCommonProps = {\n /* Error message, if it exists the select will be in error state /\n errorText?: string \| ReactNode;\n /* Help text of the select component /\n helpText?: string \| ReactNode;\n /* Size of the component /\n size?: 'small' \| 'medium' \| 'large';\n /* Whether the select component is fluid /\n isFluid?: boolean;\n /* Whether the select component is clean. If true, the select component will have a transparent background, no border and be hug the width of the content. /\n isClean?: boolean;\n /* Whether the select component is disabled /\n isDisabled?: boolean;\n /* Additional class name /\n className?: string;\n /* Additional style /\n style?: React.CSSProperties;\n} & (\n \| {\n /* Label of the select component. If not provided, please provide an ariaLabel. /\n label?: undefined;\n /* Aria label of the select component /\n ariaLabel: string;\n }\n \| {\n label: React.ReactNode;\n ariaLabel?: string;\n }\n);\n\ntype ReactSelectProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n /* Type of the select component /\n type: 'select';\n /* Props of the select component, based of React Select props /\n selectProps: Props<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\ntype ReactSelectAsyncProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n /* Type of the select component /\n type: 'async';\n /* Props of the select component, based of React Select props /\n selectProps: AsyncProps<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\ntype ReactSelectCreatableProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n /* Type of the select component /\n type: 'creatable';\n /* Props of the select component, based of React Select props /\n selectProps: CreatableProps<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\n/\n We will provide a wrapper to the three distinct select components\n * the library provides:\n * 1. Select (the most simple component)\n * 2. Creatable (for creating new values in our options)\n * 3. Async for fetching while typing, useful for cases that we avoid storing things\n * in browser\n /\n/\n @remarks\n * The `type` prop is used to specify the type of select component to render, which will be passed to the underlying React Select component.\n \n @remarks\n * The `selectProps` prop is dynamically typed based on the `type` prop and can be one of the following: `StateManagerProps`, `CreatableProps`, `AsyncProps`. All select variants will have the `SelectProps` base type from React Select. For more information on the available props, see the [React Select documentation](https://react-select.com/props).\n */\nexport type SelectProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> =\n \| ReactSelectProps<OptionType, IsMulti, GroupType>\n \| ReactSelectCreatableProps<OptionType, IsMulti, GroupType>\n \| ReactSelectAsyncProps<OptionType, IsMulti, GroupType>;\n\nexport type SelectOverrideCustomProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = Pick<\n SelectProps<OptionType, IsMulti, GroupType>,\n 'size' \| 'errorText' \| 'helpText' \| 'isClean'\n> & {\n errorTextId?: string;\n helpTextId?: string;\n};\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/select/types.tsx"],"names":[],"mappings":"","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { type ReactNode } from 'react';\nimport { type GroupBase, type Props } from 'react-select';\nimport { type AsyncProps } from 'react-select/async';\nimport { type CreatableProps } from 'react-select/creatable';\n\nexport type SelectCommonProps = {\n /* Error message, if it exists the select will be in error state /\n errorText?: string \| ReactNode;\n /* Help text of the select component /\n helpText?: string \| ReactNode;\n /* Size of the component /\n size?: 'small' \| 'medium' \| 'large';\n /* Whether the select component is fluid /\n isFluid?: boolean;\n /* Whether the select component is clean. If true, the select component will have a transparent background, no border and be hug the width of the content. /\n isClean?: boolean;\n /* Whether the select component is disabled /\n isDisabled?: boolean;\n /* Additional class name /\n className?: string;\n /* Additional style /\n style?: React.CSSProperties;\n} & (\n \| {\n // Deprecated, so this keeps its aria label union even though naming a\n // control is spelled differently on every form component. Combobox, its\n // replacement, requires the label and clips it with\n // `hasVisuallyHiddenLabel` instead.\n /* Label of the select component. If not provided, please provide an ariaLabel. /\n label?: undefined;\n /* Aria label of the select component /\n ariaLabel: string;\n }\n \| {\n label: React.ReactNode;\n ariaLabel?: string;\n }\n);\n\ntype ReactSelectProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n /* Type of the select component /\n type: 'select';\n /* Props of the select component, based of React Select props /\n selectProps: Props<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\ntype ReactSelectAsyncProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n /* Type of the select component /\n type: 'async';\n /* Props of the select component, based of React Select props /\n selectProps: AsyncProps<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\ntype ReactSelectCreatableProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n /* Type of the select component /\n type: 'creatable';\n /* Props of the select component, based of React Select props /\n selectProps: CreatableProps<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\n/\n We will provide a wrapper to the three distinct select components\n * the library provides:\n * 1. Select (the most simple component)\n * 2. Creatable (for creating new values in our options)\n * 3. Async for fetching while typing, useful for cases that we avoid storing things\n * in browser\n /\n/\n @remarks\n * The `type` prop is used to specify the type of select component to render, which will be passed to the underlying React Select component.\n \n @remarks\n * The `selectProps` prop is dynamically typed based on the `type` prop and can be one of the following: `StateManagerProps`, `CreatableProps`, `AsyncProps`. All select variants will have the `SelectProps` base type from React Select. For more information on the available props, see the [React Select documentation](https://react-select.com/props).\n */\nexport type SelectProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> =\n \| ReactSelectProps<OptionType, IsMulti, GroupType>\n \| ReactSelectCreatableProps<OptionType, IsMulti, GroupType>\n \| ReactSelectAsyncProps<OptionType, IsMulti, GroupType>;\n\nexport type SelectOverrideCustomProps<\n OptionType,\n IsMulti extends boolean = false,\n GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = Pick<\n SelectProps<OptionType, IsMulti, GroupType>,\n 'size' \| 'errorText' \| 'helpText' \| 'isClean'\n> & {\n errorTextId?: string;\n helpTextId?: string;\n};\n"]}

package/lib/esm/switch/Switch.js CHANGED Viewed

@@ -32,9 +32,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useMergeRefs } from '@floating-ui/react';
 import classNames from 'classnames';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import { useInlineFieldLabel } from '../_common/form-control';
 import { useSemiControlledInput } from '../_common/use-semi-controlled-input';
-import { needleWarningMessage } from '../_common/utils';
 export const Switch = (_a) => {
     var _b;
     var { isChecked, isDefaultChecked, isIndeterminate = false, isFluid = false, isDisabled = false, hasLeadingLabel, ariaLabel, onChange, onClick, value, label, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["isChecked", "isDefaultChecked", "isIndeterminate", "isFluid", "isDisabled", "hasLeadingLabel", "ariaLabel", "onChange", "onClick", "value", "label", "className", "style", "htmlAttributes", "ref"]);
@@ -46,10 +46,6 @@ export const Switch = (_a) => {
         onChange,
         state: (_b = isChecked !== null && isChecked !== void 0 ? isChecked : isDefaultChecked) !== null && _b !== void 0 ? _b : false,
     });
-    const labelWrappingClasses = classNames('ndl-switch-label', {
-        'ndl-disabled': isDisabled,
-        'ndl-fluid': isFluid,
-    });
     const switchClasses = classNames('ndl-switch', className, {
         'ndl-disabled': isDisabled,
     });
@@ -58,21 +54,13 @@ export const Switch = (_a) => {
             internalRef.current.indeterminate = isIndeterminate;
         }
     }, [isIndeterminate]);
-    /** TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */
-    const labelContent = useMemo(() => {
-        if (Boolean(label) === false) {
-            return null;
-        }
-        if (typeof label === 'string') {
-            return (_jsx("span", { title: label, className: "ndl-switch-label-text", children: label }));
-        }
-        return label;
-    }, [label]);
-    useEffect(() => {
-        if (Boolean(label) === false && Boolean(ariaLabel) === false) {
-            needleWarningMessage('Switch needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI');
-        }
-    }, [ariaLabel, label]);
-    return (_jsxs("label", { className: labelWrappingClasses, children: [hasLeadingLabel === true && labelContent, _jsx("input", Object.assign({ ref: mergedRefs, type: "checkbox", role: "switch", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: switchClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
+    const { labelContent, fieldClassName } = useInlineFieldLabel({
+        ariaLabel,
+        componentName: 'Switch',
+        isDisabled,
+        isFluid,
+        label,
+    });
+    return (_jsxs("label", { className: fieldClassName, children: [hasLeadingLabel === true && labelContent, _jsx("input", Object.assign({ ref: mergedRefs, type: "checkbox", role: "switch", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: switchClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
 };
 //# sourceMappingURL=Switch.js.map

package/lib/esm/switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,~~OAAO,EAAE,~~MAAM,EAAE,MAAM,OAAO,CAAC;~~AAGnD~~,OAAO,EAAE,~~sBAAsB~~,EAAE,MAAM,~~sCAAsC~~,CAAC;~~AAC9E~~,OAAO,EAAE,~~oBAAoB~~,EAAE,MAAM,~~kBAAkB~~,CAAC;~~AAkCxD~~,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAiBa,EAAE,EAAE;;QAjBjB,EACrB,SAAS,EACT,gBAAgB,EAChB,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EAClB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAE+B,EAD/B,SAAS,cAhBS,qMAiBtB,CADa;IAEZ,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,sBAAsB,CAAC;QAChE,SAAS,EAAE,QAAQ;QACnB,YAAY,EAAE,SAAS,KAAK,SAAS;QACrC,QAAQ;QACR,KAAK,EAAE,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,mCAAI,KAAK;KAC9C,CAAC,CAAC;IAEH,MAAM,~~oBAAoB,GAAG,UAAU,CAAC,kBAAkB,EAAE;QAC1D,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,OAAO;KACrB,CAAC,CAAC;IAEH,MAAM,~~aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE;QACxD,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxB,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;QACtD,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,~~wGAAwG;IACxG,~~MAAM,YAAY,~~GAAG,OAAO,CAAC,GAAG,~~EAAE~~;QAChC~~,~~IAAI~~,~~OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,~~EAAE,~~CAAC;YAC7B~~,~~OAAO~~,~~IAAI,~~CAAC;~~QACd~~,~~CAAC~~;~~QAED~~,~~IAAI~~,~~OAAO~~,~~KAAK,KAAK,~~QAAQ~~,EAAE,CAAC~~;~~YAC9B~~,~~OAAO,CACL,eAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,uBAAuB,YAClD,KAAK,GACD,CACR,CAAC~~;~~QACJ~~,~~CAAC;QACD,~~OAAO~~,KAAK,CAAC~~;~~IACf~~,~~CAAC,EAAE,CAAC,~~KAAK~~,CAAC,CAAC,CAAC~~;~~IAEZ~~,~~SAAS,~~CAAC,~~GAAG,EAAE;QACb,IAAI,OAAO,~~CAAC~~,KAAK,CAAC,KAAK,KAAK,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC~~;~~YAC7D~~,~~oBAAoB,CAClB,6GAA6G,CAC9G,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,~~OAAO,CACL,iBAAO,SAAS,EAAE,~~oBAAoB~~,~~aACnC~~,eAAe,KAAK,IAAI,IAAI,YAAY,EACzC,8BACE,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,aAAa,IACpB,SAAS,EACT,cAAc,EAClB,EACD,OAAO,CAAC,eAAe,CAAC,KAAK,KAAK,IAAI,YAAY,IAC7C,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\n\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { useEffect, ~~useMemo,~~ useRef } from 'react';\n\nimport { type CommonProps, type HtmlAttributes } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\~~nimport { needleWarningMessage } from '../_common/utils';\~~n\ntype SwitchProps = {\n /* Whether the switch is checked /\n isChecked?: boolean;\n /* Checks the input by default in uncontrolled mode /\n isDefaultChecked?: boolean; // isDefaultChecked sounds weird to me?\n /* Whether the switch is indeterminate /\n isIndeterminate?: boolean;\n /* Whether the switch is disabled /\n isDisabled?: boolean;\n /* Whether the switch & label should take the full available width of its container /\n isFluid?: boolean;\n /* The value of the switch /\n value?: HtmlAttributes<'input'>['value']; // should this be required?\n /* Whether the label should be displayed before the switch /\n hasLeadingLabel?: boolean;\n /* The callback function triggered when the switch value changes /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /* The callback function triggered when the switch is clicked /\n onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n \| {\n /* The aria label of the switch. Required if the label is not a string. /\n ariaLabel: string;\n /* The label of the switch. If not a string, supply an aria label for screen reader support. /\n label?: undefined;\n }\n \| {\n ariaLabel?: string;\n label: React.ReactNode;\n }\n);\n\nexport const Switch = ({\n isChecked,\n isDefaultChecked,\n isIndeterminate = false,\n isFluid = false,\n isDisabled = false,\n hasLeadingLabel,\n ariaLabel,\n onChange,\n onClick,\n value,\n label,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'input', SwitchProps>) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const mergedRefs = useMergeRefs([internalRef, ref]);\n\n const [isCheckedState, internalOnChange] = useSemiControlledInput({\n inputType: 'switch',\n isControlled: isChecked !== undefined,\n onChange,\n state: isChecked ?? isDefaultChecked ?? false,\n });\n\n const ~~labelWrappingClasses = classNames('ndl-switch-label', {\n 'ndl-disabled': isDisabled,\n 'ndl-fluid': isFluid,\n });\n\n const~~ switchClasses = classNames('ndl-switch', className, {\n 'ndl-disabled': isDisabled,\n });\n\n useEffect(() => {\n if (internalRef.current) {\n internalRef.current.indeterminate = isIndeterminate;\n }\n }, [isIndeterminate]);\n\n /* ~~TODO:~~ ~~Label~~ ~~handling.~~ We ~~can get rid of this annoying stuff as soon as we do proper form control. */\n const labelContent~~ = ~~useMemo~~(~~() =>~~ {\n ~~if (Boolean(label) === false) {\~~n ~~return null;\n~~ ~~}\n\n if~~ ~~(typeof label ===~~ '~~string~~'~~) {\~~n ~~return (\n <span title={label} className=\"ndl-switch-label-text\">\n {label}\n </span>\n );\n~~ }\n ~~return label;\~~n ~~}, [label]);\n\n useEffect(() => {\n~~ ~~if (Boolean(~~label~~) === false && Boolean(ariaLabel) === false) {\n needleWarningMessage(\n 'Switch needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI'~~,\n ~~);\n }\n~~ }~~, [ariaLabel, label]~~);\n\n return (\n <label className={~~labelWrappingClasses~~}>\n {hasLeadingLabel === true && labelContent}\n <input\n ref={mergedRefs}\n type=\"checkbox\"\n role=\"switch\"\n aria-label={ariaLabel}\n disabled={isDisabled}\n checked={isCheckedState}\n onClick={onClick}\n onChange={internalOnChange}\n value={value}\n style={style}\n className={switchClasses}\n {...restProps}\n {...htmlAttributes}\n />\n {Boolean(hasLeadingLabel) === false && labelContent}\n </label>\n );\n};\n"]}
1	+ {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAuC9E,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAiBa,EAAE,EAAE;;QAjBjB,EACrB,SAAS,EACT,gBAAgB,EAChB,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EAClB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAE+B,EAD/B,SAAS,cAhBS,qMAiBtB,CADa;IAEZ,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,sBAAsB,CAAC;QAChE,SAAS,EAAE,QAAQ;QACnB,YAAY,EAAE,SAAS,KAAK,SAAS;QACrC,QAAQ;QACR,KAAK,EAAE,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,mCAAI,KAAK;KAC9C,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE;QACxD,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxB,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;QACtD,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,mBAAmB,CAAC;QAC3D,SAAS;QACT,aAAa,EAAE,QAAQ;QACvB,UAAU;QACV,OAAO;QACP,KAAK;KACN,CAAC,CAAC;IAEH,OAAO,CACL,iBAAO,SAAS,EAAE,cAAc,aAC7B,eAAe,KAAK,IAAI,IAAI,YAAY,EACzC,8BACE,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,aAAa,IACpB,SAAS,EACT,cAAc,EAClB,EACD,OAAO,CAAC,eAAe,CAAC,KAAK,KAAK,IAAI,YAAY,IAC7C,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\n\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { useEffect, useRef } from 'react';\n\nimport { useInlineFieldLabel } from '../_common/form-control';\nimport { type CommonProps, type HtmlAttributes } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\n\ntype SwitchProps = {\n /* Whether the switch is checked /\n isChecked?: boolean;\n /* Checks the input by default in uncontrolled mode /\n isDefaultChecked?: boolean; // isDefaultChecked sounds weird to me?\n /* Whether the switch is indeterminate /\n isIndeterminate?: boolean;\n /* Whether the switch is disabled /\n isDisabled?: boolean;\n /* Whether the switch & label should take the full available width of its container /\n isFluid?: boolean;\n /* The value of the switch /\n value?: HtmlAttributes<'input'>['value']; // should this be required?\n /* Whether the label should be displayed before the switch /\n hasLeadingLabel?: boolean;\n /* The callback function triggered when the switch value changes /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /* The callback function triggered when the switch is clicked /\n onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n \| {\n /* The aria label of the switch. Required if the label is not a string. /\n ariaLabel: string;\n // TODO v5: inconsistent naming. Naming the switch takes a union of\n // `label` and `ariaLabel`, so the accessible name comes from a different\n // prop depending on what the label renders. Combobox instead requires the\n // label and clips it with `hasVisuallyHiddenLabel`, and TextInput reaches\n // for htmlAttributes['aria-label'].\n /* The label of the switch. If not a string, supply an aria label for screen reader support. */\n label?: undefined;\n }\n \| {\n ariaLabel?: string;\n label: React.ReactNode;\n }\n);\n\nexport const Switch = ({\n isChecked,\n isDefaultChecked,\n isIndeterminate = false,\n isFluid = false,\n isDisabled = false,\n hasLeadingLabel,\n ariaLabel,\n onChange,\n onClick,\n value,\n label,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'input', SwitchProps>) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const mergedRefs = useMergeRefs([internalRef, ref]);\n\n const [isCheckedState, internalOnChange] = useSemiControlledInput({\n inputType: 'switch',\n isControlled: isChecked !== undefined,\n onChange,\n state: isChecked ?? isDefaultChecked ?? false,\n });\n\n const switchClasses = classNames('ndl-switch', className, {\n 'ndl-disabled': isDisabled,\n });\n\n useEffect(() => {\n if (internalRef.current) {\n internalRef.current.indeterminate = isIndeterminate;\n }\n }, [isIndeterminate]);\n\n const { labelContent, fieldClassName } = useInlineFieldLabel({\n ariaLabel,\n componentName: 'Switch',\n isDisabled,\n isFluid,\n label,\n });\n\n return (\n <label className={fieldClassName}>\n {hasLeadingLabel === true && labelContent}\n <input\n ref={mergedRefs}\n type=\"checkbox\"\n role=\"switch\"\n aria-label={ariaLabel}\n disabled={isDisabled}\n checked={isCheckedState}\n onClick={onClick}\n onChange={internalOnChange}\n value={value}\n style={style}\n className={switchClasses}\n {...restProps}\n {...htmlAttributes}\n />\n {Boolean(hasLeadingLabel) === false && labelContent}\n </label>\n );\n};\n"]}

package/lib/esm/text-area/TextArea.js CHANGED Viewed

@@ -31,12 +31,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import classNames from 'classnames';
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
+import { FormFieldLabel, FormFieldMessage, useFormField, } from '../_common/form-control';
 import { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';
 import { needleWarningMessage } from '../_common/utils';
-import { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';
-import { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';
-import { Tooltip } from '../tooltip';
 /**
  *
  *
@@ -46,8 +44,12 @@ import { Tooltip } from '../tooltip';
  */
 export const TextArea = (_a) => {
     var { label, isFluid = false, errorText, helpText, isOptional = false, moreInformationText, size = 'medium', ariaLabel, tooltipProps, isDisabled = false, className, isReadOnly = false, style, value, placeholder, htmlAttributes, ref } = _a, restProps = __rest(_a, ["label", "isFluid", "errorText", "helpText", "isOptional", "moreInformationText", "size", "ariaLabel", "tooltipProps", "isDisabled", "className", "isReadOnly", "style", "value", "placeholder", "htmlAttributes", "ref"]);
-    const helpTextId = useId();
-    const errorTextId = useId();
+    const { field, controlProps } = useFormField({
+        errorText,
+        hasRequiredIndicator: isOptional,
+        helpText,
+        label,
+    });
     const containerWrappingClasses = classNames(`ndl-text-area ndl-type-text`, className, {
         'ndl-disabled': isDisabled,
         'ndl-has-error': errorText,
@@ -60,7 +62,6 @@ export const TextArea = (_a) => {
     const hasEmptyLabelValue = !label || label === '';
     const labelWrappingClasses = classNames('ndl-text-area-label', {
         'ndl-fluid': isFluid,
-        'ndl-text-area-no-label': hasEmptyLabelValue,
     });
     const isCustomLabel = label && typeof label !== 'string';
     const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;
@@ -72,20 +73,6 @@ export const TextArea = (_a) => {
             needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);
         }
     }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);
-    const informationIconClasses = classNames({
-        'ndl-information-icon-large': size === 'large',
-        'ndl-information-icon-small': size === 'small' || size === 'medium',
-    });
-    const combinedAriaDescribedby = useMemo(() => {
-        const ariaDescribedby = [];
-        if (helpText && !errorText) {
-            ariaDescribedby.push(helpTextId);
-        }
-        else if (errorText) {
-            ariaDescribedby.push(errorTextId);
-        }
-        return ariaDescribedby.join(' ');
-    }, [helpText, errorText, helpTextId, errorTextId]);
-    return (_jsxs("div", { className: containerWrappingClasses, children: [_jsxs("label", { className: labelWrappingClasses, children: [_jsx("div", { className: "ndl-text-area-wrapper", children: _jsx("textarea", Object.assign({ disabled: isDisabled, ref: ref, "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), readOnly: isReadOnly, value: value, placeholder: placeholder, style: style, "aria-describedby": combinedAriaDescribedby }, restProps, htmlAttributes)) }), !hasEmptyLabelValue && (_jsxs("div", { className: "ndl-text-area-wrapper", children: [_jsx("span", { className: "ndl-text-area-label-text", children: label }), Boolean(moreInformationText) && (_jsxs(Tooltip, Object.assign({ type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { children: _jsx("div", { className: informationIconClasses, "data-testid": "ndl-information-icon", children: _jsx(InformationCircleIconOutline, {}) }) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), isOptional && (_jsx("span", { className: "ndl-text-area-optional", children: "Optional" }))] }))] }), helpText && !errorText && (_jsx("div", { className: "ndl-text-area-msg", "aria-live": "polite", id: helpTextId, children: helpText })), errorText && (_jsxs("div", { className: "ndl-text-area-msg", children: [_jsx("div", { className: "ndl-error-icon", children: _jsx(ExclamationCircleIconSolid, {}) }), _jsx("div", { className: "ndl-error-text", id: errorTextId, "aria-live": "polite", children: errorText })] }))] }));
+    return (_jsxs("div", { className: containerWrappingClasses, children: [_jsxs("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && (_jsx(FormFieldLabel, { field: field, size: size, association: "implicit", moreInformationText: moreInformationText, tooltipProps: tooltipProps })), _jsx("div", { className: "ndl-text-area-wrapper", children: _jsx("textarea", Object.assign({ disabled: isDisabled, ref: ref, "aria-label": ariaLabel, readOnly: isReadOnly, value: value, placeholder: placeholder, style: style }, controlProps, restProps, htmlAttributes)) })] }), _jsx(FormFieldMessage, { field: field, size: size })] }));
 };
 //# sourceMappingURL=TextArea.js.map

package/lib/esm/text-area/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { type ReactNode, useId, useMemo } from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport {\n type CommonProps,\n type HtmlAttributes,\n type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { Tooltip } from '../tooltip';\n\n/\n \n \n Types\n \n \n /\n\n/\n @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n /\ntype TextAreaProps = {\n /* The label displayed above the textarea /\n label?: ReactNode;\n\n /* Whether the textarea should take the full available width /\n isFluid?: boolean;\n\n /* Assistive text displayed below the textarea /\n helpText?: string \| ReactNode;\n\n /* Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon /\n errorText?: string \| ReactNode;\n\n /* Size of the textarea /\n size?: 'small' \| 'medium' \| 'large';\n\n // TODO v5: replace with isRequired and hasRequiredIndicator, matching Combobox\n /* Whether to display the Optional label next to the field label /\n isOptional?: boolean;\n\n /* Text displayed in the information tooltip shown next to the label /\n moreInformationText?: React.ReactNode;\n\n /* Props for the Tooltip component used by the information icon /\n tooltipProps?: TooltipObjectProps;\n\n /* Whether the textarea is disabled /\n isDisabled?: boolean;\n\n /* Additional HTML attributes passed to the textarea element /\n htmlAttributes?: HtmlAttributes<'textarea'>;\n\n /* Aria label for accessibility when no visible label is provided /\n ariaLabel?: string;\n\n /* Additional class names /\n className?: string;\n\n /* Additional styles applied to the root element /\n style?: React.CSSProperties;\n\n /* Whether the textarea is read-only /\n isReadOnly?: boolean;\n\n /* The current value of the textarea /\n value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n\n /* Placeholder text displayed when the textarea is empty /\n placeholder?: React.ComponentPropsWithoutRef<'textarea'>['placeholder'];\n};\n\n/\n \n \n TextArea Component\n \n \n /\n\nexport const TextArea = ({\n label,\n isFluid = false,\n errorText,\n helpText,\n isOptional = false,\n moreInformationText,\n size = 'medium',\n ariaLabel,\n tooltipProps,\n isDisabled = false,\n className,\n isReadOnly = false,\n style,\n value,\n placeholder,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'textarea', TextAreaProps>) => {\n const helpTextId = useId();\n const errorTextId = useId();\n const containerWrappingClasses = classNames(\n `ndl-text-area ndl-type-text`,\n className,\n {\n 'ndl-disabled': isDisabled,\n 'ndl-has-error': errorText,\n 'ndl-has-icon': errorText,\n 'ndl-has-trailing-icon': errorText,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-small': size === 'small',\n },\n );\n\n const hasEmptyLabelValue = !label \|\| label === '';\n\n const labelWrappingClasses = classNames('ndl-text-area-label', {\n 'ndl-fluid': isFluid,\n 'ndl-text-area-no-label': hasEmptyLabelValue,\n });\n\n const isCustomLabel = label && typeof label !== 'string';\n const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;\n\n useMemo(() => {\n if (!label && !ariaLabel) {\n needleWarningMessage(\n 'A TextArea without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n\n if (hasCustomLabelAndNoAriaLabel) {\n needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n }\n }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n const informationIconClasses = classNames({\n 'ndl-information-icon-large': size === 'large',\n 'ndl-information-icon-small': size === 'small' \|\| size === 'medium',\n });\n\n const combinedAriaDescribedby = useMemo(() => {\n const ariaDescribedby = [];\n if (helpText && !errorText) {\n ariaDescribedby.push(helpTextId);\n } else if (errorText) {\n ariaDescribedby.push(errorTextId);\n }\n return ariaDescribedby.join(' ');\n }, [helpText, errorText, helpTextId, errorTextId]);\n\n return (\n <div className={containerWrappingClasses}>\n {/ We enable implicit label wrapping /}\n {/ Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n <label className={labelWrappingClasses}>\n <div className=\"ndl-text-area-wrapper\">\n <textarea\n disabled={isDisabled}\n ref={ref}\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n readOnly={isReadOnly}\n value={value}\n placeholder={placeholder}\n style={style}\n aria-describedby={combinedAriaDescribedby}\n {...restProps}\n {...htmlAttributes}\n />\n </div>\n {!hasEmptyLabelValue && (\n <div className=\"ndl-text-area-wrapper\">\n <span className=\"ndl-text-area-label-text\">{label}</span>\n {Boolean(moreInformationText) && (\n <Tooltip type=\"simple\" {...tooltipProps?.root}>\n <Tooltip.Trigger {...tooltipProps?.trigger}>\n <div\n className={informationIconClasses}\n data-testid=\"ndl-information-icon\"\n >\n <InformationCircleIconOutline />\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {moreInformationText}\n </Tooltip.Content>\n </Tooltip>\n )}\n {isOptional && (\n <span className=\"ndl-text-area-optional\">Optional</span>\n )}\n </div>\n )}\n </label>\n {helpText && !errorText && (\n <div className=\"ndl-text-area-msg\" aria-live=\"polite\" id={helpTextId}>\n {helpText}\n </div>\n )}\n {errorText && (\n <div className=\"ndl-text-area-msg\">\n <div className=\"ndl-error-icon\">\n <ExclamationCircleIconSolid />\n </div>\n <div className=\"ndl-error-text\" id={errorTextId} aria-live=\"polite\">\n {errorText}\n </div>\n </div>\n )}\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { type ReactNode, useMemo } from 'react';\n\nimport {\n FormFieldLabel,\n FormFieldMessage,\n useFormField,\n} from '../_common/form-control';\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport {\n type CommonProps,\n type HtmlAttributes,\n type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\n\n/\n \n \n Types\n \n \n /\n\n/\n @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n /\ntype TextAreaProps = {\n // TODO v5: inconsistent naming. The label is optional here and pairs with the\n // `ariaLabel` prop below, while Combobox requires the label and clips it with\n // `hasVisuallyHiddenLabel`, and TextInput has no aria label prop at all.\n /* The label displayed above the textarea /\n label?: ReactNode;\n\n /* Whether the textarea should take the full available width /\n isFluid?: boolean;\n\n /* Assistive text displayed below the textarea /\n helpText?: string \| ReactNode;\n\n /* Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon /\n errorText?: string \| ReactNode;\n\n /* Size of the textarea /\n size?: 'small' \| 'medium' \| 'large';\n\n // TODO v5: inconsistent naming, and one prop doing two jobs. The same switch\n // is `showRequiredOrOptionalLabel` on TextInput and `hasRequiredIndicator` on\n // Combobox and on the internal form control this maps onto. Here it also\n // decides both whether the indicator shows at all and which word it shows,\n // because TextArea exposes no `isRequired` to pair it with: requiredness has\n // to be set through htmlAttributes.required, and exposing `isRequired` on its\n // own would silently render no indicator.\n /* Whether to display the Optional label next to the field label /\n isOptional?: boolean;\n\n /* Text displayed in the information tooltip shown next to the label /\n moreInformationText?: React.ReactNode;\n\n /* Props for the Tooltip component used by the information icon /\n tooltipProps?: TooltipObjectProps;\n\n /* Whether the textarea is disabled /\n isDisabled?: boolean;\n\n /* Additional HTML attributes passed to the textarea element /\n htmlAttributes?: HtmlAttributes<'textarea'>;\n\n // TODO v5: inconsistent naming. This replaces the accessible name rather than\n // hiding the label, which is a second way of naming the control alongside\n // `label` above. TextInput reaches for htmlAttributes['aria-label'] for the\n // same case and Combobox clips the label with `hasVisuallyHiddenLabel`.\n /* Aria label for accessibility when no visible label is provided /\n ariaLabel?: string;\n\n /* Additional class names /\n className?: string;\n\n /* Additional styles applied to the root element /\n style?: React.CSSProperties;\n\n /* Whether the textarea is read-only /\n isReadOnly?: boolean;\n\n /* The current value of the textarea /\n value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n\n /* Placeholder text displayed when the textarea is empty /\n placeholder?: React.ComponentPropsWithoutRef<'textarea'>['placeholder'];\n};\n\n/\n \n \n TextArea Component\n \n \n /\n\nexport const TextArea = ({\n label,\n isFluid = false,\n errorText,\n helpText,\n isOptional = false,\n moreInformationText,\n size = 'medium',\n ariaLabel,\n tooltipProps,\n isDisabled = false,\n className,\n isReadOnly = false,\n style,\n value,\n placeholder,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'textarea', TextAreaProps>) => {\n const { field, controlProps } = useFormField({\n errorText,\n hasRequiredIndicator: isOptional,\n helpText,\n label,\n });\n const containerWrappingClasses = classNames(\n `ndl-text-area ndl-type-text`,\n className,\n {\n 'ndl-disabled': isDisabled,\n 'ndl-has-error': errorText,\n 'ndl-has-icon': errorText,\n 'ndl-has-trailing-icon': errorText,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-small': size === 'small',\n },\n );\n\n const hasEmptyLabelValue = !label \|\| label === '';\n\n const labelWrappingClasses = classNames('ndl-text-area-label', {\n 'ndl-fluid': isFluid,\n });\n\n const isCustomLabel = label && typeof label !== 'string';\n const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;\n\n useMemo(() => {\n if (!label && !ariaLabel) {\n needleWarningMessage(\n 'A TextArea without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n\n if (hasCustomLabelAndNoAriaLabel) {\n needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n }\n }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n return (\n <div className={containerWrappingClasses}>\n {/ We enable implicit label wrapping /}\n {/ Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n <label className={labelWrappingClasses}>\n {!hasEmptyLabelValue && (\n <FormFieldLabel\n field={field}\n size={size}\n association=\"implicit\"\n moreInformationText={moreInformationText}\n tooltipProps={tooltipProps}\n />\n )}\n <div className=\"ndl-text-area-wrapper\">\n <textarea\n disabled={isDisabled}\n ref={ref}\n aria-label={ariaLabel}\n readOnly={isReadOnly}\n value={value}\n placeholder={placeholder}\n style={style}\n {...controlProps}\n {...restProps}\n {...htmlAttributes}\n />\n </div>\n </label>\n <FormFieldMessage field={field} size={size} />\n </div>\n );\n};\n"]}

package/lib/esm/text-input/TextInput.js CHANGED Viewed

@@ -32,16 +32,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import classNames from 'classnames';
 import { useId, useMemo, } from 'react';
+import { FormFieldLabel, FormFieldMessage, useFormField, } from '../_common/form-control';
 import { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';
 import { useSemiControlledInput } from '../_common/use-semi-controlled-input';
 import { needleWarningMessage } from '../_common/utils';
-import { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';
-import { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';
 import { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';
 import { LoadingSpinner } from '../loading-spinner';
 import { Skeleton } from '../skeleton';
-import { Tooltip } from '../tooltip';
-import { Typography } from '../typography';
 /**
  *
  *
@@ -58,8 +55,16 @@ export const TextInput = (_a) => {
         state: value !== null && value !== void 0 ? value : '',
     });
     const hintId = useId();
-    const helpTextId = useId();
-    const errorTextId = useId();
+    const shouldRenderHint = isClearable || isLoading;
+    const { field, controlProps } = useFormField({
+        errorText,
+        // The clear/loading hint describes the input alongside the message.
+        extraDescribedByIds: [shouldRenderHint && hintId],
+        hasRequiredIndicator: showRequiredOrOptionalLabel,
+        helpText,
+        isRequired,
+        label,
+    });
     const containerWrappingClasses = classNames(`ndl-text-input`, className, {
         'ndl-disabled': isDisabled,
         'ndl-has-error': errorText,
@@ -72,15 +77,13 @@ export const TextInput = (_a) => {
         'ndl-small': size === 'small',
     });
     const hasEmptyLabelValue = label === undefined || label === null || label === '';
-    const labelWrappingClasses = classNames('ndl-form-item-label', {
+    const labelWrappingClasses = classNames('ndl-text-input-label', {
         'ndl-fluid': isFluid,
-        'ndl-form-item-no-label': hasEmptyLabelValue,
     });
     const combinedHtmlInputAttributes = Object.assign(Object.assign({}, htmlAttributes), { className: classNames('ndl-input', htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.className) });
     const ariaLabel = combinedHtmlInputAttributes['aria-label'];
     const isCustomLabel = Boolean(label) && typeof label !== 'string';
     const hasCustomLabelAndNoAriaLabel = isCustomLabel && (ariaLabel === undefined || ariaLabel === '');
-    const shouldRenderHint = isClearable || isLoading;
     const handleInputKeyDown = (event) => {
         var _a;
         if (isClearable && event.key === 'Escape' && Boolean(currentValue)) {
@@ -100,42 +103,16 @@ export const TextInput = (_a) => {
             needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);
         }
     }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);
-    const informationIconClasses = classNames({
-        'ndl-information-icon-large': size === 'large',
-        'ndl-information-icon-small': size === 'small' || size === 'medium',
-    });
-    const combinedAriaDescribedby = useMemo(() => {
-        const ariaDescribedby = [];
-        if (hintId && shouldRenderHint) {
-            ariaDescribedby.push(hintId);
-        }
-        if (helpText && !errorText) {
-            ariaDescribedby.push(helpTextId);
-        }
-        else if (errorText) {
-            ariaDescribedby.push(errorTextId);
-        }
-        return ariaDescribedby.join(' ');
-    }, [hintId, shouldRenderHint, helpText, errorText, helpTextId, errorTextId]);
-    return (_jsxs("div", { className: containerWrappingClasses, style: style, children: [_jsxs("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && (_jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-label-text-wrapper", children: [_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-label-text", children: label }), Boolean(moreInformationText) && (_jsxs(Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, hasButtonWrapper: true, children: _jsx("div", { tabIndex: 0, role: "button", "aria-label": "Information icon", children: _jsx(InformationCircleIconOutline, {}) }) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), showRequiredOrOptionalLabel && (_jsx(Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-form-item-optional", children: isRequired === true ? 'Required' : 'Optional' }))] }) }))), _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-input-wrapper", children: [(leadingElement || (isLoading && !trailingElement)) && (_jsx("div", { className: "ndl-element-leading ndl-element", children: isLoading ? (_jsx(LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
+    return (_jsxs("div", { className: containerWrappingClasses, style: style, children: [_jsxs("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && (_jsx(FormFieldLabel, { field: field, size: size, association: "implicit", moreInformationText: moreInformationText, tooltipProps: tooltipProps, wrap: (row) => (_jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: row }))) })), _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-input-wrapper", children: [(leadingElement || (isLoading && !trailingElement)) && (_jsx("div", { className: "ndl-element-leading ndl-element", children: isLoading ? (_jsx(LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
                                             ? 'ndl-medium-spinner'
                                             : 'ndl-small-spinner' })) : (leadingElement) })), _jsxs("div", { className: classNames('ndl-input-container', {
                                         'ndl-clearable': isClearable,
-                                    }), children: [_jsx("input", Object.assign({ ref: ref, readOnly: isReadOnly, disabled: isDisabled, required: isRequired, value: currentValue, placeholder: placeholder, type: "text", onChange: handleChange, "aria-describedby": combinedAriaDescribedby, "aria-invalid": Boolean(errorText) }, combinedHtmlInputAttributes, { onKeyDown: handleInputKeyDown }, restProps)), shouldRenderHint && (_jsxs("span", { id: hintId, className: "ndl-text-input-hint", "aria-hidden": true, children: [isLoading && 'Loading ', isClearable && 'Press Escape to clear input.'] })), isClearable && Boolean(currentValue) && (_jsx("div", { className: "ndl-element-clear ndl-element", children: _jsx("button", { tabIndex: -1, "aria-hidden": true, type: "button", title: "Clear input (Esc)", onClick: () => {
+                                    }), children: [_jsx("input", Object.assign({ ref: ref, readOnly: isReadOnly, disabled: isDisabled, required: isRequired, value: currentValue, placeholder: placeholder, type: "text", onChange: handleChange }, controlProps, combinedHtmlInputAttributes, { onKeyDown: handleInputKeyDown }, restProps)), shouldRenderHint && (_jsxs("span", { id: hintId, className: "ndl-text-input-hint", "aria-hidden": true, children: [isLoading && 'Loading ', isClearable && 'Press Escape to clear input.'] })), isClearable && Boolean(currentValue) && (_jsx("div", { className: "ndl-element-clear ndl-element", children: _jsx("button", { tabIndex: -1, "aria-hidden": true, type: "button", title: "Clear input (Esc)", onClick: () => {
                                                     handleChange === null || handleChange === void 0 ? void 0 : handleChange({
                                                         target: { value: '' },
                                                     });
                                                 }, children: _jsx(XMarkIconOutline, { className: "n-size-4" }) }) }))] }), trailingElement && (_jsx("div", { className: "ndl-element-trailing ndl-element", children: isLoading && !leadingElement ? (_jsx(LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
                                             ? 'ndl-medium-spinner'
-                                            : 'ndl-small-spinner' })) : (trailingElement) }))] }) }))] }), Boolean(helpText) && !errorText && (_jsx(Skeleton, { onBackground: "weak", shape: "rectangular", isLoading: isSkeletonLoading, children: _jsx(Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-form-message", htmlAttributes: {
-                        'aria-live': 'polite',
-                        id: helpTextId,
-                    }, children: helpText }) })), Boolean(errorText) && (
-            // TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.
-            // Currently the message fills 100% of the width while the rest of the text input has a set width.
-            _jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", width: "fit-content" }, skeletonProps, { isLoading: isSkeletonLoading, children: _jsxs("div", { className: "ndl-form-message", children: [_jsx("div", { className: "ndl-error-icon", children: _jsx(ExclamationCircleIconSolid, {}) }), _jsx(Typography, { className: "ndl-error-text", variant: size === 'large' ? 'body-medium' : 'body-small', htmlAttributes: {
-                                'aria-live': 'polite',
-                                id: errorTextId,
-                            }, children: errorText })] }) })))] }));
+                                            : 'ndl-small-spinner' })) : (trailingElement) }))] }) }))] }), _jsx(FormFieldMessage, { field: field, size: size, wrap: (content) => (_jsx(Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: content }))) })] }));
 };
 //# sourceMappingURL=TextInput.js.map

package/lib/esm/text-input/TextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAIL,KAAK,EACL,OAAO,GACR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,uCAAuC,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,yDAAyD,CAAC;AACrG,OAAO,EAAE,4BAA4B,EAAE,MAAM,2DAA2D,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA8E3C;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EA0Ba,EAAE,EAAE;QA1BjB,EACxB,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,cAAc,EACd,eAAe,EACf,2BAA2B,GAAG,KAAK,EACnC,mBAAmB,EACnB,IAAI,GAAG,QAAQ,EACf,WAAW,EACX,KAAK,EACL,YAAY,EACZ,cAAc,EACd,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,KAAK,EACL,iBAAiB,GAAG,KAAK,EACzB,SAAS,GAAG,KAAK,EACjB,aAAa,EACb,GAAG,OAEkC,EADlC,SAAS,cAzBY,+VA0BzB,CADa;IAEZ,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,sBAAsB,CAAC;QAC1D,SAAS,EAAE,MAAM;QACjB,YAAY,EAAE,KAAK,KAAK,SAAS;QACjC,QAAQ;QACR,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;KACnB,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IACvB,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAC3B,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAE5B,MAAM,wBAAwB,GAAG,UAAU,CAAC,gBAAgB,EAAE,SAAS,EAAE;QACvE,cAAc,EAAE,UAAU;QAC1B,eAAe,EAAE,SAAS;QAC1B,cAAc,EAAE,cAAc,IAAI,eAAe,IAAI,SAAS;QAC9D,sBAAsB,EAAE,cAAc;QACtC,uBAAuB,EAAE,eAAe,IAAI,SAAS;QACrD,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,eAAe,EAAE,UAAU;QAC3B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,MAAM,kBAAkB,GACtB,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;IAExD,MAAM,oBAAoB,GAAG,UAAU,CAAC,qBAAqB,EAAE;QAC7D,WAAW,EAAE,OAAO;QACpB,wBAAwB,EAAE,kBAAkB;KAC7C,CAAC,CAAC;IAEH,MAAM,2BAA2B,mCAC5B,cAAc,KACjB,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,SAAS,CAAC,GAC9D,CAAC;IACF,MAAM,SAAS,GAAG,2BAA2B,CAAC,YAAY,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;IAClE,MAAM,4BAA4B,GAChC,aAAa,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,EAAE,CAAC,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,SAAS,CAAC;IAElD,MAAM,kBAAkB,GAAG,CAAC,KAA4C,EAAE,EAAE;;QAC1E,IAAI,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YACnE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG;gBACb,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;aACiB,CAAC,CAAC;QAC5C,CAAC;QACD,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,SAAS,+DAAG,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACzB,oBAAoB,CAClB,wLAAwL,CACzL,CAAC;QACJ,CAAC;QAED,IAAI,4BAA4B,EAAE,CAAC;YACjC,oBAAoB,CAAC,uCAAuC,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAErD,MAAM,sBAAsB,GAAG,UAAU,CAAC;QACxC,4BAA4B,EAAE,IAAI,KAAK,OAAO;QAC9C,4BAA4B,EAAE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ;KACpE,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3C,MAAM,eAAe,GAAG,EAAE,CAAC;QAE3B,IAAI,MAAM,IAAI,gBAAgB,EAAE,CAAC;YAC/B,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC;QACD,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;YAC3B,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;aAAM,IAAI,SAAS,EAAE,CAAC;YACrB,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7E,OAAO,CACL,eAAK,SAAS,EAAE,wBAAwB,EAAE,KAAK,EAAE,KAAK,aAGpD,iBAAO,SAAS,EAAE,oBAAoB,aACnC,CAAC,kBAAkB,IAAI,CACtB,KAAC,QAAQ,kBACP,YAAY,EAAC,MAAM,EACnB,KAAK,EAAC,aAAa,IACf,aAAa,IACjB,SAAS,EAAE,iBAAiB,YAE5B,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,UAAU,IACT,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACxD,SAAS,EAAC,gBAAgB,YAEzB,KAAK,GACK,EACZ,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAC/B,MAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,IAAE,IAAI,EAAC,QAAQ,aAC5C,KAAC,OAAO,CAAC,OAAO,oBACV,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,IACzB,SAAS,EAAE,sBAAsB,EACjC,gBAAgB,kBAEhB,cACE,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACF,kBAAkB,YAE7B,KAAC,4BAA4B,KAAG,GAC5B,IACU,EAClB,KAAC,OAAO,CAAC,OAAO,oBAAK,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,cACvC,mBAAmB,IACJ,KACV,CACX,EACA,2BAA2B,IAAI,CAC9B,KAAC,UAAU,IACT,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACxD,SAAS,EAAC,wBAAwB,YAEjC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GACnC,CACd,IACG,IACG,CACZ,EACD,KAAC,QAAQ,kBACP,YAAY,EAAC,MAAM,EACnB,KAAK,EAAC,aAAa,IACf,aAAa,IACjB,SAAS,EAAE,iBAAiB,YAE5B,eAAK,SAAS,EAAC,mBAAmB,aAC/B,CAAC,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CACtD,cAAK,SAAS,EAAC,iCAAiC,YAC7C,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC3C,SAAS,EACP,IAAI,KAAK,OAAO;4CACd,CAAC,CAAC,oBAAoB;4CACtB,CAAC,CAAC,mBAAmB,GAEzB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,GACG,CACP,EACD,eACE,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE;wCAC3C,eAAe,EAAE,WAAW;qCAC7B,CAAC,aAEF,8BACE,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,YAAY,sBACJ,uBAAuB,kBAC3B,OAAO,CAAC,SAAS,CAAC,IAC5B,2BAA2B,IAC/B,SAAS,EAAE,kBAAkB,IACzB,SAAS,EACb,EACD,gBAAgB,IAAI,CACnB,gBACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAC,qBAAqB,iBAClB,IAAI,aAEhB,SAAS,IAAI,UAAU,EACvB,WAAW,IAAI,8BAA8B,IACzC,CACR,EACA,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,CACvC,cAAK,SAAS,EAAC,+BAA+B,YAC5C,iBACE,QAAQ,EAAE,CAAC,CAAC,iBACC,IAAI,EACjB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,GAAG,EAAE;oDACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG;wDACb,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;qDACiB,CAAC,CAAC;gDAC5C,CAAC,YAED,KAAC,gBAAgB,IAAC,SAAS,EAAC,UAAU,GAAG,GAClC,GACL,CACP,IACG,EACL,eAAe,IAAI,CAClB,cAAK,SAAS,EAAC,kCAAkC,YAC9C,SAAS,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAC9B,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC3C,SAAS,EACP,IAAI,KAAK,OAAO;4CACd,CAAC,CAAC,oBAAoB;4CACtB,CAAC,CAAC,mBAAmB,GAEzB,CACH,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,GACG,CACP,IACG,IACG,IACL,EACP,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,CAClC,KAAC,QAAQ,IACP,YAAY,EAAC,MAAM,EACnB,KAAK,EAAC,aAAa,EACnB,SAAS,EAAE,iBAAiB,YAE5B,KAAC,UAAU,IACT,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EACxD,SAAS,EAAC,kBAAkB,EAC5B,cAAc,EAAE;wBACd,WAAW,EAAE,QAAQ;wBACrB,EAAE,EAAE,UAAU;qBACf,YAEA,QAAQ,GACE,GACJ,CACZ,EACA,OAAO,CAAC,SAAS,CAAC,IAAI;YACrB,0GAA0G;YAC1G,kGAAkG;YAClG,KAAC,QAAQ,kBACP,YAAY,EAAC,MAAM,EACnB,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,aAAa,IACf,aAAa,IACjB,SAAS,EAAE,iBAAiB,YAE5B,eAAK,SAAS,EAAC,kBAAkB,aAC/B,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAC,0BAA0B,KAAG,GAC1B,EACN,KAAC,UAAU,IACT,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EACxD,cAAc,EAAE;gCACd,WAAW,EAAE,QAAQ;gCACrB,EAAE,EAAE,WAAW;6BAChB,YAEA,SAAS,GACC,IACT,IACG,CACZ,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\n\nimport classNames from 'classnames';\nimport {\n type InputHTMLAttributes,\n type ReactElement,\n type ReactNode,\n useId,\n useMemo,\n} from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\n\n/\n @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n \n @remarks\n * When `isSkeletonLoading` is true, the input is rendered as a loading skeleton and the `skeletonProps` prop is used to configure the skeleton. For more information, see the Skeleton documentation.\n /\ntype TextInputProps = {\n /* Assistive text displayed below the input /\n helpText?: string \| ReactNode;\n\n /* Error message displayed below the input. When provided, it overrides `helpText` and shows an error icon /\n errorText?: string \| ReactNode;\n\n /* Leading element rendered inside the input /\n leadingElement?: ReactElement;\n\n /* Trailing element rendered inside the input /\n trailingElement?: ReactElement;\n\n /* Size of the input /\n size?: 'small' \| 'medium' \| 'large';\n\n /* Whether the input is read-only /\n isReadOnly?: boolean;\n\n /\n Whether to display the Required/Optional label next to the field label.\n * Shows Required if isRequired is true, otherwise shows Optional.\n * @default false\n /\n // TODO v5: rename to hasRequiredIndicator, matching Combobox. That also drops\n // the naming-convention disable below, since has is an allowed prefix.\n // eslint-disable-next-line @typescript-eslint/naming-convention\n showRequiredOrOptionalLabel?: boolean;\n\n /* Whether the input is disabled /\n isDisabled?: boolean;\n\n /* Whether the input is required /\n isRequired?: boolean;\n\n /* The current value of the input /\n value?: React.ComponentPropsWithoutRef<'input'>['value'];\n\n /* Placeholder text displayed when the input is empty /\n placeholder?: React.ComponentPropsWithoutRef<'input'>['placeholder'];\n\n /* Callback function triggered when the input value changes /\n onChange?: React.ComponentPropsWithoutRef<'input'>['onChange'];\n\n /* Whether the input should take the full available width /\n isFluid?: boolean;\n\n /* Text displayed in the information tooltip shown next to the label /\n moreInformationText?: React.ReactNode;\n\n /* The label displayed above the input /\n label?: string \| React.ReactNode;\n\n /* Props for the Tooltip component used by the information icon /\n tooltipProps?: TooltipObjectProps;\n\n /* Whether to render skeletons instead of content /\n isSkeletonLoading?: boolean;\n\n /* Additional props forwarded to the underlying Skeleton components /\n skeletonProps?: React.ComponentProps<typeof Skeleton>;\n\n /* Whether to show the clear button /\n isClearable?: boolean;\n\n /* Whether to show the loading spinner /\n isLoading?: boolean;\n};\n\n/\n \n \n TextInput Component\n \n \n /\n\nexport const TextInput = ({\n label,\n isFluid,\n errorText,\n helpText,\n leadingElement,\n trailingElement,\n showRequiredOrOptionalLabel = false,\n moreInformationText,\n size = 'medium',\n placeholder,\n value,\n tooltipProps,\n htmlAttributes,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange,\n isClearable = false,\n className,\n style,\n isSkeletonLoading = false,\n isLoading = false,\n skeletonProps,\n ref,\n ...restProps\n}: CommonProps<'input', TextInputProps>) => {\n const [currentValue, handleChange] = useSemiControlledInput({\n inputType: 'text',\n isControlled: value !== undefined,\n onChange,\n state: value ?? '',\n });\n const hintId = useId();\n const helpTextId = useId();\n const errorTextId = useId();\n\n const containerWrappingClasses = classNames(`ndl-text-input`, className, {\n 'ndl-disabled': isDisabled,\n 'ndl-has-error': errorText,\n 'ndl-has-icon': leadingElement \|\| trailingElement \|\| errorText,\n 'ndl-has-leading-icon': leadingElement,\n 'ndl-has-trailing-icon': trailingElement \|\| errorText,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-read-only': isReadOnly,\n 'ndl-small': size === 'small',\n });\n\n const hasEmptyLabelValue =\n label === undefined \|\| label === null \|\| label === '';\n\n const labelWrappingClasses = classNames('ndl-form-item-label', {\n 'ndl-fluid': isFluid,\n 'ndl-form-item-no-label': hasEmptyLabelValue,\n });\n\n const combinedHtmlInputAttributes: InputHTMLAttributes<HTMLInputElement> = {\n ...htmlAttributes,\n className: classNames('ndl-input', htmlAttributes?.className),\n };\n const ariaLabel = combinedHtmlInputAttributes['aria-label'];\n const isCustomLabel = Boolean(label) && typeof label !== 'string';\n const hasCustomLabelAndNoAriaLabel =\n isCustomLabel && (ariaLabel === undefined \|\| ariaLabel === '');\n const shouldRenderHint = isClearable \|\| isLoading;\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (isClearable && event.key === 'Escape' && Boolean(currentValue)) {\n event.preventDefault();\n event.stopPropagation();\n handleChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n htmlAttributes?.onKeyDown?.(event);\n };\n\n useMemo(() => {\n if (!label && !ariaLabel) {\n needleWarningMessage(\n 'A TextInput without a label does not have an aria label, be sure to include an aria label for screen readers. Link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n\n if (hasCustomLabelAndNoAriaLabel) {\n needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n }\n }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n const informationIconClasses = classNames({\n 'ndl-information-icon-large': size === 'large',\n 'ndl-information-icon-small': size === 'small' \|\| size === 'medium',\n });\n\n const combinedAriaDescribedby = useMemo(() => {\n const ariaDescribedby = [];\n\n if (hintId && shouldRenderHint) {\n ariaDescribedby.push(hintId);\n }\n if (helpText && !errorText) {\n ariaDescribedby.push(helpTextId);\n } else if (errorText) {\n ariaDescribedby.push(errorTextId);\n }\n return ariaDescribedby.join(' ');\n }, [hintId, shouldRenderHint, helpText, errorText, helpTextId, errorTextId]);\n\n return (\n <div className={containerWrappingClasses} style={style}>\n {/ We enable implicit label wrapping /}\n {/ Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n <label className={labelWrappingClasses}>\n {!hasEmptyLabelValue && (\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-label-text-wrapper\">\n <Typography\n variant={size === 'large' ? 'body-large' : 'body-medium'}\n className=\"ndl-label-text\"\n >\n {label}\n </Typography>\n {Boolean(moreInformationText) && (\n <Tooltip {...tooltipProps?.root} type=\"simple\">\n <Tooltip.Trigger\n {...tooltipProps?.trigger}\n className={informationIconClasses}\n hasButtonWrapper\n >\n <div\n tabIndex={0}\n role=\"button\"\n aria-label=\"Information icon\"\n >\n <InformationCircleIconOutline />\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {moreInformationText}\n </Tooltip.Content>\n </Tooltip>\n )}\n {showRequiredOrOptionalLabel && (\n <Typography\n variant={size === 'large' ? 'body-large' : 'body-medium'}\n className=\"ndl-form-item-optional\"\n >\n {isRequired === true ? 'Required' : 'Optional'}\n </Typography>\n )}\n </div>\n </Skeleton>\n )}\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-input-wrapper\">\n {(leadingElement \|\| (isLoading && !trailingElement)) && (\n <div className=\"ndl-element-leading ndl-element\">\n {isLoading ? (\n <LoadingSpinner\n size={size === 'large' ? 'medium' : 'small'}\n className={\n size === 'large'\n ? 'ndl-medium-spinner'\n : 'ndl-small-spinner'\n }\n />\n ) : (\n leadingElement\n )}\n </div>\n )}\n <div\n className={classNames('ndl-input-container', {\n 'ndl-clearable': isClearable,\n })}\n >\n <input\n ref={ref}\n readOnly={isReadOnly}\n disabled={isDisabled}\n required={isRequired}\n value={currentValue}\n placeholder={placeholder}\n type=\"text\"\n onChange={handleChange}\n aria-describedby={combinedAriaDescribedby}\n aria-invalid={Boolean(errorText)}\n {...combinedHtmlInputAttributes}\n onKeyDown={handleInputKeyDown}\n {...restProps}\n />\n {shouldRenderHint && (\n <span\n id={hintId}\n className=\"ndl-text-input-hint\"\n aria-hidden={true}\n >\n {isLoading && 'Loading '}\n {isClearable && 'Press Escape to clear input.'}\n </span>\n )}\n {isClearable && Boolean(currentValue) && (\n <div className=\"ndl-element-clear ndl-element\">\n <button\n tabIndex={-1}\n aria-hidden={true}\n type=\"button\"\n title=\"Clear input (Esc)\"\n onClick={() => {\n handleChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n }}\n >\n <XMarkIconOutline className=\"n-size-4\" />\n </button>\n </div>\n )}\n </div>\n {trailingElement && (\n <div className=\"ndl-element-trailing ndl-element\">\n {isLoading && !leadingElement ? (\n <LoadingSpinner\n size={size === 'large' ? 'medium' : 'small'}\n className={\n size === 'large'\n ? 'ndl-medium-spinner'\n : 'ndl-small-spinner'\n }\n />\n ) : (\n trailingElement\n )}\n </div>\n )}\n </div>\n </Skeleton>\n </label>\n {Boolean(helpText) && !errorText && (\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n isLoading={isSkeletonLoading}\n >\n <Typography\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n className=\"ndl-form-message\"\n htmlAttributes={{\n 'aria-live': 'polite',\n id: helpTextId,\n }}\n >\n {helpText}\n </Typography>\n </Skeleton>\n )}\n {Boolean(errorText) && (\n // TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.\n // Currently the message fills 100% of the width while the rest of the text input has a set width.\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n width=\"fit-content\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-form-message\">\n <div className=\"ndl-error-icon\">\n <ExclamationCircleIconSolid />\n </div>\n <Typography\n className=\"ndl-error-text\"\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n htmlAttributes={{\n 'aria-live': 'polite',\n id: errorTextId,\n }}\n >\n {errorText}\n </Typography>\n </div>\n </Skeleton>\n )}\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\n\nimport classNames from 'classnames';\nimport {\n type InputHTMLAttributes,\n type ReactElement,\n type ReactNode,\n useId,\n useMemo,\n} from 'react';\n\nimport {\n FormFieldLabel,\n FormFieldMessage,\n useFormField,\n} from '../_common/form-control';\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\n\n/\n @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n \n @remarks\n * When `isSkeletonLoading` is true, the input is rendered as a loading skeleton and the `skeletonProps` prop is used to configure the skeleton. For more information, see the Skeleton documentation.\n /\ntype TextInputProps = {\n /* Assistive text displayed below the input /\n helpText?: string \| ReactNode;\n\n /* Error message displayed below the input. When provided, it overrides `helpText` and shows an error icon /\n errorText?: string \| ReactNode;\n\n /* Leading element rendered inside the input /\n leadingElement?: ReactElement;\n\n /* Trailing element rendered inside the input /\n trailingElement?: ReactElement;\n\n /* Size of the input /\n size?: 'small' \| 'medium' \| 'large';\n\n /* Whether the input is read-only /\n isReadOnly?: boolean;\n\n /\n Whether to display the Required/Optional label next to the field label.\n * Shows Required if isRequired is true, otherwise shows Optional.\n * @default false\n /\n // TODO v5: inconsistent naming. The same switch is `hasRequiredIndicator` on\n // Combobox and on the internal form control this maps onto, and `isOptional`\n // on TextArea. The name also needs the disable below, which a name using one\n // of the allowed boolean prefixes would not.\n // eslint-disable-next-line @typescript-eslint/naming-convention\n showRequiredOrOptionalLabel?: boolean;\n\n /* Whether the input is disabled /\n isDisabled?: boolean;\n\n /* Whether the input is required /\n isRequired?: boolean;\n\n /* The current value of the input /\n value?: React.ComponentPropsWithoutRef<'input'>['value'];\n\n /* Placeholder text displayed when the input is empty /\n placeholder?: React.ComponentPropsWithoutRef<'input'>['placeholder'];\n\n /* Callback function triggered when the input value changes /\n onChange?: React.ComponentPropsWithoutRef<'input'>['onChange'];\n\n /* Whether the input should take the full available width /\n isFluid?: boolean;\n\n /* Text displayed in the information tooltip shown next to the label /\n moreInformationText?: React.ReactNode;\n\n // TODO v5: inconsistent naming. Every form control names itself differently:\n // the label is optional here and a design with no room for it reaches for\n // htmlAttributes['aria-label'], TextArea, Select, Checkbox, Radio and Switch\n // expose an `ariaLabel` prop instead, and Combobox requires the label and\n // clips it with `hasVisuallyHiddenLabel`.\n /* The label displayed above the input /\n label?: string \| React.ReactNode;\n\n /* Props for the Tooltip component used by the information icon /\n tooltipProps?: TooltipObjectProps;\n\n /* Whether to render skeletons instead of content /\n isSkeletonLoading?: boolean;\n\n /* Additional props forwarded to the underlying Skeleton components /\n skeletonProps?: React.ComponentProps<typeof Skeleton>;\n\n /* Whether to show the clear button /\n isClearable?: boolean;\n\n /* Whether to show the loading spinner /\n isLoading?: boolean;\n};\n\n/\n \n \n TextInput Component\n \n \n /\n\nexport const TextInput = ({\n label,\n isFluid,\n errorText,\n helpText,\n leadingElement,\n trailingElement,\n showRequiredOrOptionalLabel = false,\n moreInformationText,\n size = 'medium',\n placeholder,\n value,\n tooltipProps,\n htmlAttributes,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange,\n isClearable = false,\n className,\n style,\n isSkeletonLoading = false,\n isLoading = false,\n skeletonProps,\n ref,\n ...restProps\n}: CommonProps<'input', TextInputProps>) => {\n const [currentValue, handleChange] = useSemiControlledInput({\n inputType: 'text',\n isControlled: value !== undefined,\n onChange,\n state: value ?? '',\n });\n const hintId = useId();\n const shouldRenderHint = isClearable \|\| isLoading;\n const { field, controlProps } = useFormField({\n errorText,\n // The clear/loading hint describes the input alongside the message.\n extraDescribedByIds: [shouldRenderHint && hintId],\n hasRequiredIndicator: showRequiredOrOptionalLabel,\n helpText,\n isRequired,\n label,\n });\n\n const containerWrappingClasses = classNames(`ndl-text-input`, className, {\n 'ndl-disabled': isDisabled,\n 'ndl-has-error': errorText,\n 'ndl-has-icon': leadingElement \|\| trailingElement \|\| errorText,\n 'ndl-has-leading-icon': leadingElement,\n 'ndl-has-trailing-icon': trailingElement \|\| errorText,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-read-only': isReadOnly,\n 'ndl-small': size === 'small',\n });\n\n const hasEmptyLabelValue =\n label === undefined \|\| label === null \|\| label === '';\n\n const labelWrappingClasses = classNames('ndl-text-input-label', {\n 'ndl-fluid': isFluid,\n });\n\n const combinedHtmlInputAttributes: InputHTMLAttributes<HTMLInputElement> = {\n ...htmlAttributes,\n className: classNames('ndl-input', htmlAttributes?.className),\n };\n const ariaLabel = combinedHtmlInputAttributes['aria-label'];\n const isCustomLabel = Boolean(label) && typeof label !== 'string';\n const hasCustomLabelAndNoAriaLabel =\n isCustomLabel && (ariaLabel === undefined \|\| ariaLabel === '');\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (isClearable && event.key === 'Escape' && Boolean(currentValue)) {\n event.preventDefault();\n event.stopPropagation();\n handleChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n htmlAttributes?.onKeyDown?.(event);\n };\n\n useMemo(() => {\n if (!label && !ariaLabel) {\n needleWarningMessage(\n 'A TextInput without a label does not have an aria label, be sure to include an aria label for screen readers. Link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n\n if (hasCustomLabelAndNoAriaLabel) {\n needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n }\n }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n return (\n <div className={containerWrappingClasses} style={style}>\n {/ We enable implicit label wrapping /}\n {/ Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n <label className={labelWrappingClasses}>\n {!hasEmptyLabelValue && (\n <FormFieldLabel\n field={field}\n size={size}\n association=\"implicit\"\n moreInformationText={moreInformationText}\n tooltipProps={tooltipProps}\n wrap={(row) => (\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n {row}\n </Skeleton>\n )}\n />\n )}\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-input-wrapper\">\n {(leadingElement \|\| (isLoading && !trailingElement)) && (\n <div className=\"ndl-element-leading ndl-element\">\n {isLoading ? (\n <LoadingSpinner\n size={size === 'large' ? 'medium' : 'small'}\n className={\n size === 'large'\n ? 'ndl-medium-spinner'\n : 'ndl-small-spinner'\n }\n />\n ) : (\n leadingElement\n )}\n </div>\n )}\n <div\n className={classNames('ndl-input-container', {\n 'ndl-clearable': isClearable,\n })}\n >\n <input\n ref={ref}\n readOnly={isReadOnly}\n disabled={isDisabled}\n required={isRequired}\n value={currentValue}\n placeholder={placeholder}\n type=\"text\"\n onChange={handleChange}\n {...controlProps}\n {...combinedHtmlInputAttributes}\n onKeyDown={handleInputKeyDown}\n {...restProps}\n />\n {shouldRenderHint && (\n <span\n id={hintId}\n className=\"ndl-text-input-hint\"\n aria-hidden={true}\n >\n {isLoading && 'Loading '}\n {isClearable && 'Press Escape to clear input.'}\n </span>\n )}\n {isClearable && Boolean(currentValue) && (\n <div className=\"ndl-element-clear ndl-element\">\n <button\n tabIndex={-1}\n aria-hidden={true}\n type=\"button\"\n title=\"Clear input (Esc)\"\n onClick={() => {\n handleChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n }}\n >\n <XMarkIconOutline className=\"n-size-4\" />\n </button>\n </div>\n )}\n </div>\n {trailingElement && (\n <div className=\"ndl-element-trailing ndl-element\">\n {isLoading && !leadingElement ? (\n <LoadingSpinner\n size={size === 'large' ? 'medium' : 'small'}\n className={\n size === 'large'\n ? 'ndl-medium-spinner'\n : 'ndl-small-spinner'\n }\n />\n ) : (\n trailingElement\n )}\n </div>\n )}\n </div>\n </Skeleton>\n </label>\n\n <FormFieldMessage\n field={field}\n size={size}\n wrap={(content) => (\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n {content}\n </Skeleton>\n )}\n />\n </div>\n );\n};\n"]}

package/lib/esm/text-input/stories/text-input-sizes.story.js CHANGED Viewed

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { TextInput } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-gap-token-16", children: [_jsx(TextInput, { label: "Small Input", size: "small", htmlAttributes: { id: 'text-input-small' } }), _jsx(TextInput, { label: "Medium Input", size: "medium", htmlAttributes: { id: 'text-input-medium' } }), _jsx(TextInput, { label: "Large Input", size: "large", htmlAttributes: { id: 'text-input-large' } })] }));
+    return (_jsxs("div", { className: "n-flex n-gap-token-16", children: [_jsx(TextInput, { label: "Small Input", size: "small", placeholder: "Small Input", helpText: "Help text", htmlAttributes: { id: 'text-input-small' } }), _jsx(TextInput, { label: "Medium Input", size: "medium", placeholder: "Medium Input", helpText: "Help text", htmlAttributes: { id: 'text-input-medium' } }), _jsx(TextInput, { label: "Large Input", size: "large", placeholder: "Large Input", helpText: "Help text", htmlAttributes: { id: 'text-input-large' } })] }));
 };
 export default Component;
 //# sourceMappingURL=text-input-sizes.story.js.map

package/lib/esm/text-input/stories/text-input-sizes.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-input-sizes.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAC1C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,cAAc,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,GAC3C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAC1C,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { TextInput } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-gap-token-16\">\n <TextInput\n label=\"Small Input\"\n size=\"small\"\n htmlAttributes={{ id: 'text-input-small' }}\n />\n <TextInput\n label=\"Medium Input\"\n size=\"medium\"\n htmlAttributes={{ id: 'text-input-medium' }}\n />\n <TextInput\n label=\"Large Input\"\n size=\"large\"\n htmlAttributes={{ id: 'text-input-large' }}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"text-input-sizes.story.js","sourceRoot":"","sources":["../../../../src/text-input/stories/text-input-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,aAAa,EACzB,QAAQ,EAAC,WAAW,EACpB,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAC1C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAC,WAAW,EACpB,cAAc,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,GAC3C,EACF,KAAC,SAAS,IACR,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,aAAa,EACzB,QAAQ,EAAC,WAAW,EACpB,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,GAC1C,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { TextInput } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-gap-token-16\">\n <TextInput\n label=\"Small Input\"\n size=\"small\"\n placeholder=\"Small Input\"\n helpText=\"Help text\"\n htmlAttributes={{ id: 'text-input-small' }}\n />\n <TextInput\n label=\"Medium Input\"\n size=\"medium\"\n placeholder=\"Medium Input\"\n helpText=\"Help text\"\n htmlAttributes={{ id: 'text-input-medium' }}\n />\n <TextInput\n label=\"Large Input\"\n size=\"large\"\n placeholder=\"Large Input\"\n helpText=\"Help text\"\n htmlAttributes={{ id: 'text-input-large' }}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}