@neo4j-ndl/react 4.16.0 → 4.16.2
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.
- package/lib/cjs/accordion/Accordion.js +2 -2
- package/lib/cjs/accordion/Accordion.js.map +1 -1
- package/lib/cjs/ai/file-tag/FileTag.js +2 -2
- package/lib/cjs/ai/file-tag/FileTag.js.map +1 -1
- package/lib/cjs/ai/image-tag/ImageTag.js +2 -2
- package/lib/cjs/ai/image-tag/ImageTag.js.map +1 -1
- package/lib/cjs/ai/presence/Presence.js +2 -2
- package/lib/cjs/ai/presence/Presence.js.map +1 -1
- package/lib/cjs/ai/preview/Preview.js +3 -2
- package/lib/cjs/ai/preview/Preview.js.map +1 -1
- package/lib/cjs/ai/prompt/Prompt.js +6 -3
- package/lib/cjs/ai/prompt/Prompt.js.map +1 -1
- package/lib/cjs/ai/reasoning/Reasoning.js +2 -2
- package/lib/cjs/ai/reasoning/Reasoning.js.map +1 -1
- package/lib/cjs/ai/tool-call/ToolCall.js +2 -2
- package/lib/cjs/ai/tool-call/ToolCall.js.map +1 -1
- package/lib/cjs/avatar/Avatar.js +2 -2
- package/lib/cjs/avatar/Avatar.js.map +1 -1
- package/lib/cjs/banner/Banner.js +12 -7
- package/lib/cjs/banner/Banner.js.map +1 -1
- package/lib/cjs/breadcrumbs/Breadcrumbs.js +2 -2
- package/lib/cjs/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/lib/cjs/clipboard-button/ClipboardButton.js +2 -2
- package/lib/cjs/clipboard-button/ClipboardButton.js.map +1 -1
- package/lib/cjs/code-block/CodeBlock.js +3 -2
- package/lib/cjs/code-block/CodeBlock.js.map +1 -1
- package/lib/cjs/color-picker/ColorPicker.js +2 -2
- package/lib/cjs/color-picker/ColorPicker.js.map +1 -1
- package/lib/cjs/data-grid/Components.js +18 -11
- package/lib/cjs/data-grid/Components.js.map +1 -1
- package/lib/cjs/date-picker/DatePicker.js +8 -5
- package/lib/cjs/date-picker/DatePicker.js.map +1 -1
- package/lib/cjs/dialog/Dialog.js +8 -5
- package/lib/cjs/dialog/Dialog.js.map +1 -1
- package/lib/cjs/dismissible-tag/DismissibleTag.js +2 -2
- package/lib/cjs/dismissible-tag/DismissibleTag.js.map +1 -1
- package/lib/cjs/drawer/Drawer.js +2 -2
- package/lib/cjs/drawer/Drawer.js.map +1 -1
- package/lib/cjs/dropdown-button/DropdownButton.js +2 -2
- package/lib/cjs/dropdown-button/DropdownButton.js.map +1 -1
- package/lib/cjs/dropzone/Dropzone.js +5 -3
- package/lib/cjs/dropzone/Dropzone.js.map +1 -1
- package/lib/cjs/icon-button-array/IconButtonArray.js +6 -3
- package/lib/cjs/icon-button-array/IconButtonArray.js.map +1 -1
- package/lib/cjs/inline-edit/InlineEdit.js +6 -4
- package/lib/cjs/inline-edit/InlineEdit.js.map +1 -1
- package/lib/cjs/menu/Menu.js +4 -3
- package/lib/cjs/menu/Menu.js.map +1 -1
- package/lib/cjs/next/tree-view/TreeView.js +4 -3
- package/lib/cjs/next/tree-view/TreeView.js.map +1 -1
- package/lib/cjs/select/Overrides.js +4 -3
- package/lib/cjs/select/Overrides.js.map +1 -1
- package/lib/cjs/select/Select.js +2 -2
- package/lib/cjs/select/Select.js.map +1 -1
- package/lib/cjs/select-icon-button/SelectIconButton.js +2 -2
- package/lib/cjs/select-icon-button/SelectIconButton.js.map +1 -1
- package/lib/cjs/side-navigation/SideNavigation.js +4 -3
- package/lib/cjs/side-navigation/SideNavigation.js.map +1 -1
- package/lib/cjs/status-label/StatusLabel.js +10 -7
- package/lib/cjs/status-label/StatusLabel.js.map +1 -1
- package/lib/cjs/tabs/Tabs.js +4 -3
- package/lib/cjs/tabs/Tabs.js.map +1 -1
- package/lib/cjs/tag/Tag.js +2 -2
- package/lib/cjs/tag/Tag.js.map +1 -1
- package/lib/cjs/text-area/TextArea.js +3 -2
- package/lib/cjs/text-area/TextArea.js.map +1 -1
- package/lib/cjs/text-input/TextInput.js +6 -4
- package/lib/cjs/text-input/TextInput.js.map +1 -1
- package/lib/cjs/text-link/TextLink.js +3 -2
- package/lib/cjs/text-link/TextLink.js.map +1 -1
- package/lib/cjs/time-picker/TimePicker.js +3 -2
- package/lib/cjs/time-picker/TimePicker.js.map +1 -1
- package/lib/cjs/timezone-picker/TimeZonePicker.js +2 -2
- package/lib/cjs/timezone-picker/TimeZonePicker.js.map +1 -1
- package/lib/cjs/toast/Toast.js +6 -4
- package/lib/cjs/toast/Toast.js.map +1 -1
- package/lib/cjs/tree-view/TreeItemWrapper.js +2 -2
- package/lib/cjs/tree-view/TreeItemWrapper.js.map +1 -1
- package/lib/cjs/tree-view/TreeViewTextItem.js +3 -2
- package/lib/cjs/tree-view/TreeViewTextItem.js.map +1 -1
- package/lib/esm/accordion/Accordion.js +1 -1
- package/lib/esm/accordion/Accordion.js.map +1 -1
- package/lib/esm/ai/file-tag/FileTag.js +1 -1
- package/lib/esm/ai/file-tag/FileTag.js.map +1 -1
- package/lib/esm/ai/image-tag/ImageTag.js +1 -1
- package/lib/esm/ai/image-tag/ImageTag.js.map +1 -1
- package/lib/esm/ai/presence/Presence.js +1 -1
- package/lib/esm/ai/presence/Presence.js.map +1 -1
- package/lib/esm/ai/preview/Preview.js +2 -1
- package/lib/esm/ai/preview/Preview.js.map +1 -1
- package/lib/esm/ai/prompt/Prompt.js +4 -1
- package/lib/esm/ai/prompt/Prompt.js.map +1 -1
- package/lib/esm/ai/reasoning/Reasoning.js +1 -1
- package/lib/esm/ai/reasoning/Reasoning.js.map +1 -1
- package/lib/esm/ai/tool-call/ToolCall.js +1 -1
- package/lib/esm/ai/tool-call/ToolCall.js.map +1 -1
- package/lib/esm/avatar/Avatar.js +1 -1
- package/lib/esm/avatar/Avatar.js.map +1 -1
- package/lib/esm/banner/Banner.js +6 -1
- package/lib/esm/banner/Banner.js.map +1 -1
- package/lib/esm/breadcrumbs/Breadcrumbs.js +1 -1
- package/lib/esm/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/lib/esm/clipboard-button/ClipboardButton.js +1 -1
- package/lib/esm/clipboard-button/ClipboardButton.js.map +1 -1
- package/lib/esm/code-block/CodeBlock.js +2 -1
- package/lib/esm/code-block/CodeBlock.js.map +1 -1
- package/lib/esm/color-picker/ColorPicker.js +1 -1
- package/lib/esm/color-picker/ColorPicker.js.map +1 -1
- package/lib/esm/data-grid/Components.js +8 -1
- package/lib/esm/data-grid/Components.js.map +1 -1
- package/lib/esm/date-picker/DatePicker.js +4 -1
- package/lib/esm/date-picker/DatePicker.js.map +1 -1
- package/lib/esm/dialog/Dialog.js +4 -1
- package/lib/esm/dialog/Dialog.js.map +1 -1
- package/lib/esm/dismissible-tag/DismissibleTag.js +1 -1
- package/lib/esm/dismissible-tag/DismissibleTag.js.map +1 -1
- package/lib/esm/drawer/Drawer.js +1 -1
- package/lib/esm/drawer/Drawer.js.map +1 -1
- package/lib/esm/dropdown-button/DropdownButton.js +1 -1
- package/lib/esm/dropdown-button/DropdownButton.js.map +1 -1
- package/lib/esm/dropzone/Dropzone.js +3 -1
- package/lib/esm/dropzone/Dropzone.js.map +1 -1
- package/lib/esm/icon-button-array/IconButtonArray.js +4 -1
- package/lib/esm/icon-button-array/IconButtonArray.js.map +1 -1
- package/lib/esm/inline-edit/InlineEdit.js +3 -1
- package/lib/esm/inline-edit/InlineEdit.js.map +1 -1
- package/lib/esm/menu/Menu.js +2 -1
- package/lib/esm/menu/Menu.js.map +1 -1
- package/lib/esm/next/tree-view/TreeView.js +2 -1
- package/lib/esm/next/tree-view/TreeView.js.map +1 -1
- package/lib/esm/select/Overrides.js +2 -1
- package/lib/esm/select/Overrides.js.map +1 -1
- package/lib/esm/select/Select.js +1 -1
- package/lib/esm/select/Select.js.map +1 -1
- package/lib/esm/select-icon-button/SelectIconButton.js +1 -1
- package/lib/esm/select-icon-button/SelectIconButton.js.map +1 -1
- package/lib/esm/side-navigation/SideNavigation.js +2 -1
- package/lib/esm/side-navigation/SideNavigation.js.map +1 -1
- package/lib/esm/status-label/StatusLabel.js +4 -1
- package/lib/esm/status-label/StatusLabel.js.map +1 -1
- package/lib/esm/tabs/Tabs.js +2 -1
- package/lib/esm/tabs/Tabs.js.map +1 -1
- package/lib/esm/tag/Tag.js +1 -1
- package/lib/esm/tag/Tag.js.map +1 -1
- package/lib/esm/text-area/TextArea.js +2 -1
- package/lib/esm/text-area/TextArea.js.map +1 -1
- package/lib/esm/text-input/TextInput.js +3 -1
- package/lib/esm/text-input/TextInput.js.map +1 -1
- package/lib/esm/text-link/TextLink.js +2 -1
- package/lib/esm/text-link/TextLink.js.map +1 -1
- package/lib/esm/time-picker/TimePicker.js +2 -1
- package/lib/esm/time-picker/TimePicker.js.map +1 -1
- package/lib/esm/timezone-picker/TimeZonePicker.js +1 -1
- package/lib/esm/timezone-picker/TimeZonePicker.js.map +1 -1
- package/lib/esm/toast/Toast.js +3 -1
- package/lib/esm/toast/Toast.js.map +1 -1
- package/lib/esm/tree-view/TreeItemWrapper.js +1 -1
- package/lib/esm/tree-view/TreeItemWrapper.js.map +1 -1
- package/lib/esm/tree-view/TreeViewTextItem.js +2 -1
- package/lib/esm/tree-view/TreeViewTextItem.js.map +1 -1
- package/lib/types/ai/file-tag/FileTag.d.ts.map +1 -1
- package/lib/types/ai/image-tag/ImageTag.d.ts.map +1 -1
- package/lib/types/ai/presence/Presence.d.ts.map +1 -1
- package/lib/types/ai/preview/Preview.d.ts.map +1 -1
- package/lib/types/ai/prompt/Prompt.d.ts.map +1 -1
- package/lib/types/ai/reasoning/Reasoning.d.ts.map +1 -1
- package/lib/types/ai/tool-call/ToolCall.d.ts.map +1 -1
- package/lib/types/banner/Banner.d.ts.map +1 -1
- package/lib/types/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/lib/types/code-block/CodeBlock.d.ts.map +1 -1
- package/lib/types/data-grid/Components.d.ts +1 -1
- package/lib/types/data-grid/Components.d.ts.map +1 -1
- package/lib/types/date-picker/DatePicker.d.ts.map +1 -1
- package/lib/types/dialog/Dialog.d.ts.map +1 -1
- package/lib/types/dropzone/Dropzone.d.ts.map +1 -1
- package/lib/types/icon-button-array/IconButtonArray.d.ts.map +1 -1
- package/lib/types/inline-edit/InlineEdit.d.ts.map +1 -1
- package/lib/types/menu/Menu.d.ts.map +1 -1
- package/lib/types/next/tree-view/TreeView.d.ts.map +1 -1
- package/lib/types/select/Overrides.d.ts.map +1 -1
- package/lib/types/side-navigation/SideNavigation.d.ts.map +1 -1
- package/lib/types/status-label/StatusLabel.d.ts.map +1 -1
- package/lib/types/tabs/Tabs.d.ts.map +1 -1
- package/lib/types/text-area/TextArea.d.ts.map +1 -1
- package/lib/types/text-input/TextInput.d.ts.map +1 -1
- package/lib/types/text-link/TextLink.d.ts.map +1 -1
- package/lib/types/time-picker/TimePicker.d.ts.map +1 -1
- package/lib/types/toast/Toast.d.ts.map +1 -1
- package/lib/types/tree-view/TreeView.d.ts.map +1 -1
- package/lib/types/tree-view/TreeViewTextItem.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -41,7 +41,9 @@ const react_1 = require("react");
|
|
|
41
41
|
const messages_1 = require("../_common/messages");
|
|
42
42
|
const use_semi_controlled_input_1 = require("../_common/use-semi-controlled-input");
|
|
43
43
|
const utils_1 = require("../_common/utils");
|
|
44
|
-
const
|
|
44
|
+
const ExclamationCircleIconSolid_1 = require("../icons/generated/heroIcons/ExclamationCircleIconSolid");
|
|
45
|
+
const InformationCircleIconOutline_1 = require("../icons/generated/heroIcons/InformationCircleIconOutline");
|
|
46
|
+
const XMarkIconOutline_1 = require("../icons/generated/heroIcons/XMarkIconOutline");
|
|
45
47
|
const loading_spinner_1 = require("../loading-spinner");
|
|
46
48
|
const skeleton_1 = require("../skeleton");
|
|
47
49
|
const tooltip_1 = require("../tooltip");
|
|
@@ -121,7 +123,7 @@ const TextInput = (_a) => {
|
|
|
121
123
|
}
|
|
122
124
|
return ariaDescribedby.join(' ');
|
|
123
125
|
}, [hintId, shouldRenderHint, helpText, errorText, helpTextId, errorTextId]);
|
|
124
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: containerWrappingClasses, style: style, children: [(0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-label-text-wrapper", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-label-text", children: label }), Boolean(moreInformationText) && ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: 0, role: "button", "aria-label": "Information icon", children: (0, jsx_runtime_1.jsx)(
|
|
126
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: containerWrappingClasses, style: style, children: [(0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [!hasEmptyLabelValue && ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-label-text-wrapper", children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-label-text", children: label }), Boolean(moreInformationText) && ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { className: informationIconClasses, hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: 0, role: "button", "aria-label": "Information icon", children: (0, jsx_runtime_1.jsx)(InformationCircleIconOutline_1.InformationCircleIconOutline, {}) }) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: moreInformationText }))] }))), showRequiredOrOptionalLabel && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-large' : 'body-medium', className: "ndl-form-item-optional", children: isRequired === true ? 'Required' : 'Optional' }))] }) }))), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-input-wrapper", children: [(leadingElement || (isLoading && !trailingElement)) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-element-leading ndl-element", children: isLoading ? ((0, jsx_runtime_1.jsx)(loading_spinner_1.LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
|
|
125
127
|
? 'ndl-medium-spinner'
|
|
126
128
|
: 'ndl-small-spinner' })) : (leadingElement) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ndl-input-container', {
|
|
127
129
|
'ndl-clearable': isClearable,
|
|
@@ -129,7 +131,7 @@ const TextInput = (_a) => {
|
|
|
129
131
|
handleChange === null || handleChange === void 0 ? void 0 : handleChange({
|
|
130
132
|
target: { value: '' },
|
|
131
133
|
});
|
|
132
|
-
}, children: (0, jsx_runtime_1.jsx)(
|
|
134
|
+
}, children: (0, jsx_runtime_1.jsx)(XMarkIconOutline_1.XMarkIconOutline, { className: "n-size-4" }) }) }))] }), trailingElement && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-element-trailing ndl-element", children: isLoading && !leadingElement ? ((0, jsx_runtime_1.jsx)(loading_spinner_1.LoadingSpinner, { size: size === 'large' ? 'medium' : 'small', className: size === 'large'
|
|
133
135
|
? 'ndl-medium-spinner'
|
|
134
136
|
: 'ndl-small-spinner' })) : (trailingElement) }))] }) }))] }), Boolean(helpText) && !errorText && ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { onBackground: "weak", shape: "rectangular", isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-form-message", htmlAttributes: {
|
|
135
137
|
'aria-live': 'polite',
|
|
@@ -137,7 +139,7 @@ const TextInput = (_a) => {
|
|
|
137
139
|
}, children: helpText }) })), Boolean(errorText) && (
|
|
138
140
|
// TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.
|
|
139
141
|
// Currently the message fills 100% of the width while the rest of the text input has a set width.
|
|
140
|
-
(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", width: "fit-content" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-form-message", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-error-icon", children: (0, jsx_runtime_1.jsx)(
|
|
142
|
+
(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", width: "fit-content" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-form-message", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-error-icon", children: (0, jsx_runtime_1.jsx)(ExclamationCircleIconSolid_1.ExclamationCircleIconSolid, {}) }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { className: "ndl-error-text", variant: size === 'large' ? 'body-medium' : 'body-small', htmlAttributes: {
|
|
141
143
|
'aria-live': 'polite',
|
|
142
144
|
id: errorTextId,
|
|
143
145
|
}, children: errorText })] }) })))] }));
|
|
@@ -1 +1 @@
|
|
|
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 { 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 {\n ExclamationCircleIconSolid,\n InformationCircleIconOutline,\n XMarkIconOutline,\n} from '../icons';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\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 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 { 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\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 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"]}
|
|
@@ -37,7 +37,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
37
37
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
38
38
|
*/
|
|
39
39
|
const classnames_1 = __importDefault(require("classnames"));
|
|
40
|
-
const
|
|
40
|
+
const ArrowUpRightIconOutline_1 = require("../icons/generated/heroIcons/ArrowUpRightIconOutline");
|
|
41
|
+
const ChevronRightIconOutline_1 = require("../icons/generated/heroIcons/ChevronRightIconOutline");
|
|
41
42
|
const TextLink = (_a) => {
|
|
42
43
|
var { children, href, type = 'internal', as, className, target = type === 'external' || type === 'external-underline' ? '_blank' : '', style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "href", "type", "as", "className", "target", "style", "htmlAttributes", "ref"]);
|
|
43
44
|
const Component = as !== null && as !== void 0 ? as : 'a';
|
|
@@ -47,7 +48,7 @@ const TextLink = (_a) => {
|
|
|
47
48
|
'ndl-internal-icon': type === 'internal-icon',
|
|
48
49
|
'ndl-internal-underline': type === 'internal-underline',
|
|
49
50
|
});
|
|
50
|
-
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, href: href, ref: ref, style: style, target: target }, restProps, htmlAttributes, { children: [children, (type === 'external' || type === 'external-underline') && ((0, jsx_runtime_1.jsx)(
|
|
51
|
+
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, href: href, ref: ref, style: style, target: target }, restProps, htmlAttributes, { children: [children, (type === 'external' || type === 'external-underline') && ((0, jsx_runtime_1.jsx)(ArrowUpRightIconOutline_1.ArrowUpRightIconOutline, { className: "ndl-external-link-icon" })), type === 'internal-icon' && ((0, jsx_runtime_1.jsx)(ChevronRightIconOutline_1.ChevronRightIconOutline, { className: "ndl-external-link-icon" }))] })));
|
|
51
52
|
};
|
|
52
53
|
exports.TextLink = TextLink;
|
|
53
54
|
//# sourceMappingURL=TextLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextLink.js","sourceRoot":"","sources":["../../../src/text-link/TextLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAIpC,
|
|
1
|
+
{"version":3,"file":"TextLink.js","sourceRoot":"","sources":["../../../src/text-link/TextLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAIpC,kGAA+F;AAC/F,kGAA+F;AA4CxF,MAAM,QAAQ,GAAG,CAAoC,EAWjB,EAAE,EAAE;QAXa,EAC1D,QAAQ,EACR,IAAI,EACJ,IAAI,GAAG,UAAU,EACjB,EAAE,EACF,SAAS,EACT,MAAM,GAAG,IAAI,KAAK,UAAU,IAAI,IAAI,KAAK,oBAAoB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAC7E,KAAK,EACL,cAAc,EACd,GAAG,OAEsC,EADtC,SAAS,cAV8C,2FAW3D,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,GAAG,CAAC;IAE/C,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE,SAAS,EAAE;QACrD,mBAAmB,EAAE,IAAI,KAAK,UAAU;QACxC,wBAAwB,EAAE,IAAI,KAAK,oBAAoB;QACvD,mBAAmB,EAAE,IAAI,KAAK,eAAe;QAC7C,wBAAwB,EAAE,IAAI,KAAK,oBAAoB;KACxD,CAAC,CAAC;IAEH,OAAO,CACL,wBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,IACV,SAAS,EACT,cAAc,eAEjB,QAAQ,EACR,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,KAAK,oBAAoB,CAAC,IAAI,CACzD,uBAAC,iDAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D,EACA,IAAI,KAAK,eAAe,IAAI,CAC3B,uBAAC,iDAAuB,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAC/D,KACS,CACb,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,QAAQ,YAwCnB","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';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { ArrowUpRightIconOutline } from '../icons/generated/heroIcons/ArrowUpRightIconOutline';\nimport { ChevronRightIconOutline } from '../icons/generated/heroIcons/ChevronRightIconOutline';\n\n/** @deprecated Use `type=\"internal\"` instead. */\ntype InternalUnderlineTextLinkType = 'internal-underline';\n\n/** @deprecated Use `type=\"external\"` instead. */\ntype ExternalUnderlineTextLinkType = 'external-underline';\n\n/** @deprecated Use `type=\"internal\"` instead and append with a chevron icon. */\ntype InternalIconTextLinkType = 'internal-icon';\n\ntype TextLinkType =\n | 'internal'\n | InternalUnderlineTextLinkType\n | InternalIconTextLinkType\n | 'external'\n | ExternalUnderlineTextLinkType;\n\ntype TextLinkProps = {\n /** The content displayed inside the link */\n children: React.ReactNode;\n\n /** The URL the link points to */\n href?: string;\n\n /**\n * The type of the text link\n * All types render with an underline and primary text color by default. Additional color styling can be applied via `className`.\n * - 'internal': A link to another page within the application\n * - 'internal-underline': Deprecated alias of 'internal'\n * - 'internal-icon': Deprecated variant with a trailing chevron icon\n * - 'external': A link to an external website. An external link icon is appended.\n * - 'external-underline': Deprecated alias of 'external'\n * @default 'internal'\n */\n type?: TextLinkType;\n\n /** Specifies where to open the linked document. If omitted and `type` is `\"external\"` it defaults to `\"_blank\"`. */\n target?: HTMLAnchorElement['target'];\n\n /** Additional class name */\n className?: string;\n};\n\nexport const TextLink = <T extends React.ElementType = 'a'>({\n children,\n href,\n type = 'internal',\n as,\n className,\n target = type === 'external' || type === 'external-underline' ? '_blank' : '',\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TextLinkProps>) => {\n const Component: React.ElementType = as ?? 'a';\n\n const classes = classNames('ndl-text-link', className, {\n 'ndl-external-link': type === 'external',\n 'ndl-external-underline': type === 'external-underline',\n 'ndl-internal-icon': type === 'internal-icon',\n 'ndl-internal-underline': type === 'internal-underline',\n });\n\n return (\n <Component\n className={classes}\n href={href}\n ref={ref}\n style={style}\n target={target}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n {(type === 'external' || type === 'external-underline') && (\n <ArrowUpRightIconOutline className=\"ndl-external-link-icon\" />\n )}\n {type === 'internal-icon' && (\n <ChevronRightIconOutline className=\"ndl-external-link-icon\" />\n )}\n </Component>\n );\n};\n"]}
|
|
@@ -42,7 +42,8 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
42
42
|
const react_2 = require("react");
|
|
43
43
|
const conditional_wrap_1 = require("../conditional-wrap");
|
|
44
44
|
const dialog_context_1 = require("../dialog/dialog-context");
|
|
45
|
-
const
|
|
45
|
+
const ClockIconOutline_1 = require("../icons/generated/heroIcons/ClockIconOutline");
|
|
46
|
+
const ExclamationCircleIconSolid_1 = require("../icons/generated/heroIcons/ExclamationCircleIconSolid");
|
|
46
47
|
const theme_1 = require("../theme");
|
|
47
48
|
const typography_1 = require("../typography");
|
|
48
49
|
const generate_time_options_1 = require("./generate-time-options");
|
|
@@ -292,7 +293,7 @@ const TimePicker = (_a) => {
|
|
|
292
293
|
}
|
|
293
294
|
}, placeholder: format,
|
|
294
295
|
// The typed value can never be longer than the format pattern.
|
|
295
|
-
maxLength: format.length }, restProps, htmlAttributes)), (0, jsx_runtime_1.jsx)(
|
|
296
|
+
maxLength: format.length }, restProps, htmlAttributes)), (0, jsx_runtime_1.jsx)(ClockIconOutline_1.ClockIconOutline, { className: "ndl-icon-svg ndl-time-picker-icon" })] })] }), errorToShow !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-time-picker-error-wrapper", role: "status", children: [(0, jsx_runtime_1.jsx)(ExclamationCircleIconSolid_1.ExclamationCircleIconSolid, { className: "ndl-time-picker-error-icon" }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-time-picker-error-text", htmlAttributes: { id: errorTextId }, children: errorToShow })] }))] })), context.open && ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPortaled, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { children: wrapChildren })), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, initialFocus: -1, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.setFloating, className: (0, classnames_1.default)(themeClassName, 'ndl-time-picker-popover', Object.assign({}, classes)), style: Object.assign(Object.assign(Object.assign({}, transitionStyles), floatingStyles), { width: isFluid === true
|
|
296
297
|
? (_d = containerRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth
|
|
297
298
|
: undefined }) }, getFloatingProps(), { children: (0, jsx_runtime_1.jsx)("ul", { ref: listRef, role: "listbox", id: listboxId, tabIndex: -1, children: timeOptions.map((time, i) => ((0, jsx_runtime_1.jsx)("li", { id: `${listboxId}-option-${i}`, role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.toString(is24Hour, hasSeconds)) === time ||
|
|
298
299
|
(editedInput === null || editedInput === void 0 ? void 0 : editedInput.toString(is24Hour, hasSeconds)) === time, value: time, onClick: (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/time-picker/TimePicker.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 {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n shift,\n useDismiss,\n useFloating,\n useInteractions,\n useMergeRefs,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n useCallback,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { ClockIconOutline, ExclamationCircleIconSolid } from '../icons';\nimport { useNeedleTheme } from '../theme';\nimport { Typography } from '../typography';\nimport { generateTimeOptions } from './generate-time-options';\nimport { NeedleTime } from './needle-time';\nimport {\n useKeyboardNavigation,\n useTimePickerPopover,\n} from './time-picker-hooks';\n\nexport type TimeFormat = 'hh:mm' | 'hh:mm aa' | 'hh:mm:ss' | 'hh:mm:ss aa';\n\n/** Fixed input width per format (only used when the picker is not fluid). */\nconst INPUT_WIDTH_BY_FORMAT: Record<TimeFormat, string> = {\n 'hh:mm': '6rem',\n 'hh:mm aa': '9rem',\n 'hh:mm:ss': '7.5rem',\n 'hh:mm:ss aa': '11rem',\n};\n\nexport type TimePickerProps = {\n /** The value of the time picker */\n value?: NeedleTime;\n /** The format of the time picker */\n format?: TimeFormat;\n /** Whether the time picker is fluid */\n isFluid?: boolean;\n /** Whether the time picker is read only */\n isReadOnly?: boolean;\n /** Whether the time picker is required */\n isRequired?: boolean;\n /** Whether the time picker is disabled */\n isDisabled?: boolean;\n /** The time interval of the time picker, in minutes */\n timeInterval?: number;\n /** The label of the time picker */\n label?: string;\n /** The size of the time picker */\n size?: 'small' | 'medium' | 'large';\n /** Manually set the error text */\n errorText?: string;\n /** Callback function triggered when the time picker value changes */\n onChange?: (time: NeedleTime) => void;\n /** Callback function triggered when the time picker encounters an error */\n onError?: (error: string, time: NeedleTime) => void;\n /**\n * Strategy for the dropdown floating element.\n * By default it is absolute, but if the component is inside of a needle Dialog, it is set to fixed.\n * If this prop is set, no auto-detection of Dialog is done.\n */\n floatingStrategy?: 'absolute' | 'fixed';\n /** Whether the dropdown element is rendered in a portal. */\n isPortaled?: boolean;\n};\n\nexport const TimePicker = <T extends React.ElementType = 'div'>({\n format = 'hh:mm',\n isDisabled,\n isFluid,\n isReadOnly,\n isRequired,\n value,\n timeInterval = 15,\n label,\n onChange,\n className,\n onError,\n style,\n size = 'medium',\n errorText,\n htmlAttributes,\n floatingStrategy,\n isPortaled: isPortaledProp,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TimePickerProps>) => {\n const [editedInput, setEditedInput] = useState<NeedleTime | undefined>(value);\n\n const is24Hour = !format.includes('aa');\n const hasSeconds = format.includes('ss');\n const [inputValue, setInputValue] = useState<string>(\n value?.toString(is24Hour, hasSeconds) ?? '',\n );\n const listRef = useRef<HTMLUListElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n const [lastAction, setLastAction] = useState<'type' | 'arrow'>('type');\n const [error, setError] = useState<string | undefined>(undefined);\n const errorTextId = useId();\n const listboxId = useId();\n\n const timeOptions = useMemo(\n () => generateTimeOptions(is24Hour, timeInterval, hasSeconds),\n [is24Hour, timeInterval, hasSeconds],\n );\n\n const { themeClassName } = useNeedleTheme();\n const { isPopoverOpen, setIsPopoverOpen } = useTimePickerPopover(false);\n const { focusedIndex, setFocusedIndex, handleArrowNavigation } =\n useKeyboardNavigation(listRef, timeOptions.length);\n\n const errorToShow =\n errorText !== undefined && errorText !== '' ? errorText : error;\n\n const classes = {\n 'ndl-disabled': isDisabled,\n 'ndl-error': errorToShow !== undefined,\n 'ndl-fluid': isFluid,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-read-only': isReadOnly,\n 'ndl-small': size === 'small',\n };\n\n const inputWidth = isFluid === true ? '100%' : INPUT_WIDTH_BY_FORMAT[format];\n\n const isValidTime = useCallback(\n (hours: number, minutes: number, seconds: number) => {\n if (hours > 23 || hours < 0) {\n return false;\n }\n\n if (minutes > 59 || minutes < 0) {\n return false;\n }\n\n if (seconds > 59 || seconds < 0) {\n return false;\n }\n\n return true;\n },\n [],\n );\n\n useEffect(() => {\n if (error !== undefined) {\n onError?.(error, NeedleTime.fromString(inputValue));\n }\n }, [error, inputValue, onError]);\n\n useEffect(() => {\n setEditedInput(value);\n setInputValue(value?.toString(is24Hour, hasSeconds) ?? '');\n }, [is24Hour, hasSeconds, value]);\n\n useEffect(() => {\n if (isPopoverOpen) {\n setTimeout(() => {\n listRef.current?.children[focusedIndex]?.scrollIntoView({\n block: 'center',\n inline: 'nearest',\n });\n }, 0);\n } else {\n setTimeout(() => {\n const selectedIndex =\n timeOptions.indexOf(value?.toString(is24Hour, hasSeconds) ?? '') ?? 0;\n setFocusedIndex(selectedIndex);\n }, 0);\n }\n }, [\n focusedIndex,\n is24Hour,\n hasSeconds,\n isPopoverOpen,\n value,\n setFocusedIndex,\n timeOptions,\n ]);\n\n const handleOnClick = (timeText: string) => {\n if (onChange) {\n onChange(NeedleTime.fromString(timeText));\n }\n setError(undefined);\n setInputValue(timeText);\n setEditedInput(NeedleTime.fromString(timeText));\n setIsPopoverOpen(false);\n };\n const newHandleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n scrollToTime(e.target.value);\n setInputValue(e.target.value);\n setLastAction('type');\n\n const time = NeedleTime.fromString(e.target.value);\n if (!isValidTime(time.hour, time.minute, time.second)) {\n setError('Invalid time');\n } else {\n setError(undefined);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (isReadOnly === true || isDisabled === true) {\n e.preventDefault();\n return;\n }\n\n if (e.key === 'Escape') {\n setIsPopoverOpen(false);\n }\n\n setIsPopoverOpen(true);\n\n if (e.key === 'Enter') {\n const minTypedLength = (is24Hour ? 5 : 6) + (hasSeconds ? 3 : 0);\n if (lastAction === 'type' && inputValue.length >= minTypedLength) {\n const time = NeedleTime.fromString(inputValue);\n handleOnClick(time.toString(is24Hour, hasSeconds));\n } else if (lastAction === 'type' && !inputValue.includes(':')) {\n const time = NeedleTime.fromString(inputValue);\n if (isValidTime(time.hour, time.minute, time.second)) {\n handleOnClick(time.toString(is24Hour, hasSeconds));\n }\n setIsPopoverOpen(false);\n } else {\n handleOnClick(timeOptions[focusedIndex]);\n }\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n setLastAction('arrow');\n handleArrowNavigation(e.key);\n }\n };\n\n const scrollToTime = (startOfTime: string) => {\n const parsedTime = startOfTime.toLowerCase().replace(/[^0-9amp]/g, '');\n let index = -1;\n\n // Handle AM/PM input\n const isPM = parsedTime.includes('p');\n const isAM = parsedTime.includes('a');\n const timeDigits = parsedTime.replace(/[amp]/g, '');\n\n if (timeDigits.length === 1) {\n // Single digit - assume it's an hour\n const hour = `0${timeDigits}`;\n const minutes = hasSeconds ? '00:00' : '00';\n const searchTime = is24Hour\n ? `${hour}:${minutes}`\n : `${hour}:${minutes} ${isPM ? 'PM' : 'AM'}`;\n index = timeOptions.indexOf(searchTime);\n } else {\n // Find closest matching time\n const closestTime = timeOptions.find((time) => {\n const timeWithoutSpecialChars = time\n .toLowerCase()\n .replace(/[^0-9amp]/g, '');\n if (isPM || isAM) {\n // If AM/PM specified, match that specifically\n return timeWithoutSpecialChars.startsWith(parsedTime);\n } else {\n // Otherwise just match the numbers\n return timeWithoutSpecialChars\n .replace(/[amp]/g, '')\n .startsWith(timeDigits);\n }\n });\n index = closestTime !== undefined ? timeOptions.indexOf(closestTime) : -1;\n }\n\n if (index !== -1) {\n setFocusedIndex(index);\n }\n\n return index;\n };\n\n /** Custom floating ui solution */\n const isInsideDialog = useIsInsideDialog();\n const isPortaled = isPortaledProp ?? !isInsideDialog;\n const containerRef = useRef<HTMLDivElement>(null);\n const { refs, floatingStyles, context } = useFloating({\n elements: {\n reference: containerRef.current,\n },\n middleware: [\n offset(10),\n flip({\n fallbackPlacements: ['top'],\n fallbackStrategy: 'bestFit',\n }),\n shift({ padding: 5 }),\n ],\n onOpenChange: (open) => {\n setIsPopoverOpen(open);\n },\n open: isDisabled !== true && isReadOnly !== true && isPopoverOpen,\n placement: 'bottom',\n strategy: floatingStrategy ?? (isInsideDialog ? 'fixed' : 'absolute'),\n whileElementsMounted: autoUpdate,\n });\n const dismiss = useDismiss(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n });\n\n const mergedRef = useMergeRefs([refs.setReference, containerRef]);\n\n return (\n <>\n <div\n className={classNames('ndl-time-picker', className, {\n ...classes,\n })}\n ref={mergedRef}\n {...getReferenceProps()}\n style={{\n width: isFluid === true ? '100%' : 'fit-content',\n }}\n >\n <label className=\"ndl-time-picker-label\">\n {label !== undefined && (\n <Typography\n variant={size === 'large' ? 'body-large' : 'body-medium'}\n >\n {label}\n </Typography>\n )}\n <div\n className=\"ndl-time-picker-input-wrapper\"\n style={{\n width: inputWidth,\n ...style,\n }}\n >\n <input\n role=\"combobox\"\n aria-expanded={isPopoverOpen}\n aria-controls={listboxId}\n aria-activedescendant={\n isPopoverOpen && focusedIndex >= 0\n ? `${listboxId}-option-${focusedIndex}`\n : undefined\n }\n aria-label={label} // TODO: handle label natively\n aria-invalid={Boolean(errorToShow)}\n aria-describedby={errorToShow ? errorTextId : undefined}\n className=\"ndl-time-picker-input\"\n type=\"text\"\n ref={inputRef}\n value={inputValue}\n disabled={isDisabled}\n readOnly={isReadOnly}\n required={isRequired}\n onChange={newHandleInputChange}\n onKeyDown={handleKeyDown}\n onClick={() => {\n if (isReadOnly === true || isDisabled === true) {\n return;\n }\n setIsPopoverOpen(true);\n }}\n onBlur={(e) => {\n if (isReadOnly === true || isDisabled === true) {\n return;\n }\n\n if (\n e.relatedTarget?.classList.contains(\n 'ndl-time-picker-popover-item',\n ) === true\n ) {\n return;\n }\n\n if (inputValue.length < 4) {\n setError('Invalid time');\n return;\n }\n\n const time = NeedleTime.fromString(inputValue);\n\n if (time === undefined || time === null) {\n setError('Invalid time');\n return;\n }\n\n if (!isValidTime(time.hour, time.minute, time.second)) {\n setError('Invalid time');\n } else {\n setError(undefined);\n setInputValue(time.toString(is24Hour, hasSeconds));\n setEditedInput(time);\n onChange?.(time);\n }\n }}\n placeholder={format}\n // The typed value can never be longer than the format pattern.\n maxLength={format.length}\n {...restProps}\n {...htmlAttributes}\n />\n <ClockIconOutline className=\"ndl-icon-svg ndl-time-picker-icon\" />\n </div>\n </label>\n {errorToShow !== undefined && (\n <div className=\"ndl-time-picker-error-wrapper\" role=\"status\">\n <ExclamationCircleIconSolid className=\"ndl-time-picker-error-icon\" />\n <Typography\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n className=\"ndl-time-picker-error-text\"\n htmlAttributes={{ id: errorTextId }}\n >\n {errorToShow}\n </Typography>\n </div>\n )}\n </div>\n\n {context.open && (\n <ConditionalWrap\n shouldWrap={isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal>{wrapChildren}</FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n >\n <div\n ref={refs.setFloating}\n className={classNames(themeClassName, 'ndl-time-picker-popover', {\n ...classes,\n })}\n style={{\n ...transitionStyles,\n ...floatingStyles,\n width:\n isFluid === true\n ? containerRef.current?.clientWidth\n : undefined,\n }}\n {...getFloatingProps()}\n >\n <ul ref={listRef} role=\"listbox\" id={listboxId} tabIndex={-1}>\n {timeOptions.map((time, i) => (\n <li\n id={`${listboxId}-option-${i}`}\n key={i}\n role=\"option\"\n aria-selected={\n value?.toString(is24Hour, hasSeconds) === time ||\n editedInput?.toString(is24Hour, hasSeconds) === time\n }\n value={time}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n handleOnClick(time);\n setIsPopoverOpen(false);\n }}\n onMouseDown={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n tabIndex={-1}\n className={classNames(\n focusedIndex === i ? 'focused' : '',\n 'ndl-time-picker-popover-item',\n )}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.stopPropagation();\n handleOnClick(time);\n }\n }}\n >\n {time}\n </li>\n ))}\n </ul>\n </div>\n </FloatingFocusManager>\n </ConditionalWrap>\n )}\n </>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/time-picker/TimePicker.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 {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n shift,\n useDismiss,\n useFloating,\n useInteractions,\n useMergeRefs,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport {\n useCallback,\n useEffect,\n useId,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { ClockIconOutline } from '../icons/generated/heroIcons/ClockIconOutline';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { useNeedleTheme } from '../theme';\nimport { Typography } from '../typography';\nimport { generateTimeOptions } from './generate-time-options';\nimport { NeedleTime } from './needle-time';\nimport {\n useKeyboardNavigation,\n useTimePickerPopover,\n} from './time-picker-hooks';\n\nexport type TimeFormat = 'hh:mm' | 'hh:mm aa' | 'hh:mm:ss' | 'hh:mm:ss aa';\n\n/** Fixed input width per format (only used when the picker is not fluid). */\nconst INPUT_WIDTH_BY_FORMAT: Record<TimeFormat, string> = {\n 'hh:mm': '6rem',\n 'hh:mm aa': '9rem',\n 'hh:mm:ss': '7.5rem',\n 'hh:mm:ss aa': '11rem',\n};\n\nexport type TimePickerProps = {\n /** The value of the time picker */\n value?: NeedleTime;\n /** The format of the time picker */\n format?: TimeFormat;\n /** Whether the time picker is fluid */\n isFluid?: boolean;\n /** Whether the time picker is read only */\n isReadOnly?: boolean;\n /** Whether the time picker is required */\n isRequired?: boolean;\n /** Whether the time picker is disabled */\n isDisabled?: boolean;\n /** The time interval of the time picker, in minutes */\n timeInterval?: number;\n /** The label of the time picker */\n label?: string;\n /** The size of the time picker */\n size?: 'small' | 'medium' | 'large';\n /** Manually set the error text */\n errorText?: string;\n /** Callback function triggered when the time picker value changes */\n onChange?: (time: NeedleTime) => void;\n /** Callback function triggered when the time picker encounters an error */\n onError?: (error: string, time: NeedleTime) => void;\n /**\n * Strategy for the dropdown floating element.\n * By default it is absolute, but if the component is inside of a needle Dialog, it is set to fixed.\n * If this prop is set, no auto-detection of Dialog is done.\n */\n floatingStrategy?: 'absolute' | 'fixed';\n /** Whether the dropdown element is rendered in a portal. */\n isPortaled?: boolean;\n};\n\nexport const TimePicker = <T extends React.ElementType = 'div'>({\n format = 'hh:mm',\n isDisabled,\n isFluid,\n isReadOnly,\n isRequired,\n value,\n timeInterval = 15,\n label,\n onChange,\n className,\n onError,\n style,\n size = 'medium',\n errorText,\n htmlAttributes,\n floatingStrategy,\n isPortaled: isPortaledProp,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TimePickerProps>) => {\n const [editedInput, setEditedInput] = useState<NeedleTime | undefined>(value);\n\n const is24Hour = !format.includes('aa');\n const hasSeconds = format.includes('ss');\n const [inputValue, setInputValue] = useState<string>(\n value?.toString(is24Hour, hasSeconds) ?? '',\n );\n const listRef = useRef<HTMLUListElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n const [lastAction, setLastAction] = useState<'type' | 'arrow'>('type');\n const [error, setError] = useState<string | undefined>(undefined);\n const errorTextId = useId();\n const listboxId = useId();\n\n const timeOptions = useMemo(\n () => generateTimeOptions(is24Hour, timeInterval, hasSeconds),\n [is24Hour, timeInterval, hasSeconds],\n );\n\n const { themeClassName } = useNeedleTheme();\n const { isPopoverOpen, setIsPopoverOpen } = useTimePickerPopover(false);\n const { focusedIndex, setFocusedIndex, handleArrowNavigation } =\n useKeyboardNavigation(listRef, timeOptions.length);\n\n const errorToShow =\n errorText !== undefined && errorText !== '' ? errorText : error;\n\n const classes = {\n 'ndl-disabled': isDisabled,\n 'ndl-error': errorToShow !== undefined,\n 'ndl-fluid': isFluid,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-read-only': isReadOnly,\n 'ndl-small': size === 'small',\n };\n\n const inputWidth = isFluid === true ? '100%' : INPUT_WIDTH_BY_FORMAT[format];\n\n const isValidTime = useCallback(\n (hours: number, minutes: number, seconds: number) => {\n if (hours > 23 || hours < 0) {\n return false;\n }\n\n if (minutes > 59 || minutes < 0) {\n return false;\n }\n\n if (seconds > 59 || seconds < 0) {\n return false;\n }\n\n return true;\n },\n [],\n );\n\n useEffect(() => {\n if (error !== undefined) {\n onError?.(error, NeedleTime.fromString(inputValue));\n }\n }, [error, inputValue, onError]);\n\n useEffect(() => {\n setEditedInput(value);\n setInputValue(value?.toString(is24Hour, hasSeconds) ?? '');\n }, [is24Hour, hasSeconds, value]);\n\n useEffect(() => {\n if (isPopoverOpen) {\n setTimeout(() => {\n listRef.current?.children[focusedIndex]?.scrollIntoView({\n block: 'center',\n inline: 'nearest',\n });\n }, 0);\n } else {\n setTimeout(() => {\n const selectedIndex =\n timeOptions.indexOf(value?.toString(is24Hour, hasSeconds) ?? '') ?? 0;\n setFocusedIndex(selectedIndex);\n }, 0);\n }\n }, [\n focusedIndex,\n is24Hour,\n hasSeconds,\n isPopoverOpen,\n value,\n setFocusedIndex,\n timeOptions,\n ]);\n\n const handleOnClick = (timeText: string) => {\n if (onChange) {\n onChange(NeedleTime.fromString(timeText));\n }\n setError(undefined);\n setInputValue(timeText);\n setEditedInput(NeedleTime.fromString(timeText));\n setIsPopoverOpen(false);\n };\n const newHandleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n scrollToTime(e.target.value);\n setInputValue(e.target.value);\n setLastAction('type');\n\n const time = NeedleTime.fromString(e.target.value);\n if (!isValidTime(time.hour, time.minute, time.second)) {\n setError('Invalid time');\n } else {\n setError(undefined);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (isReadOnly === true || isDisabled === true) {\n e.preventDefault();\n return;\n }\n\n if (e.key === 'Escape') {\n setIsPopoverOpen(false);\n }\n\n setIsPopoverOpen(true);\n\n if (e.key === 'Enter') {\n const minTypedLength = (is24Hour ? 5 : 6) + (hasSeconds ? 3 : 0);\n if (lastAction === 'type' && inputValue.length >= minTypedLength) {\n const time = NeedleTime.fromString(inputValue);\n handleOnClick(time.toString(is24Hour, hasSeconds));\n } else if (lastAction === 'type' && !inputValue.includes(':')) {\n const time = NeedleTime.fromString(inputValue);\n if (isValidTime(time.hour, time.minute, time.second)) {\n handleOnClick(time.toString(is24Hour, hasSeconds));\n }\n setIsPopoverOpen(false);\n } else {\n handleOnClick(timeOptions[focusedIndex]);\n }\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n setLastAction('arrow');\n handleArrowNavigation(e.key);\n }\n };\n\n const scrollToTime = (startOfTime: string) => {\n const parsedTime = startOfTime.toLowerCase().replace(/[^0-9amp]/g, '');\n let index = -1;\n\n // Handle AM/PM input\n const isPM = parsedTime.includes('p');\n const isAM = parsedTime.includes('a');\n const timeDigits = parsedTime.replace(/[amp]/g, '');\n\n if (timeDigits.length === 1) {\n // Single digit - assume it's an hour\n const hour = `0${timeDigits}`;\n const minutes = hasSeconds ? '00:00' : '00';\n const searchTime = is24Hour\n ? `${hour}:${minutes}`\n : `${hour}:${minutes} ${isPM ? 'PM' : 'AM'}`;\n index = timeOptions.indexOf(searchTime);\n } else {\n // Find closest matching time\n const closestTime = timeOptions.find((time) => {\n const timeWithoutSpecialChars = time\n .toLowerCase()\n .replace(/[^0-9amp]/g, '');\n if (isPM || isAM) {\n // If AM/PM specified, match that specifically\n return timeWithoutSpecialChars.startsWith(parsedTime);\n } else {\n // Otherwise just match the numbers\n return timeWithoutSpecialChars\n .replace(/[amp]/g, '')\n .startsWith(timeDigits);\n }\n });\n index = closestTime !== undefined ? timeOptions.indexOf(closestTime) : -1;\n }\n\n if (index !== -1) {\n setFocusedIndex(index);\n }\n\n return index;\n };\n\n /** Custom floating ui solution */\n const isInsideDialog = useIsInsideDialog();\n const isPortaled = isPortaledProp ?? !isInsideDialog;\n const containerRef = useRef<HTMLDivElement>(null);\n const { refs, floatingStyles, context } = useFloating({\n elements: {\n reference: containerRef.current,\n },\n middleware: [\n offset(10),\n flip({\n fallbackPlacements: ['top'],\n fallbackStrategy: 'bestFit',\n }),\n shift({ padding: 5 }),\n ],\n onOpenChange: (open) => {\n setIsPopoverOpen(open);\n },\n open: isDisabled !== true && isReadOnly !== true && isPopoverOpen,\n placement: 'bottom',\n strategy: floatingStrategy ?? (isInsideDialog ? 'fixed' : 'absolute'),\n whileElementsMounted: autoUpdate,\n });\n const dismiss = useDismiss(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n });\n\n const mergedRef = useMergeRefs([refs.setReference, containerRef]);\n\n return (\n <>\n <div\n className={classNames('ndl-time-picker', className, {\n ...classes,\n })}\n ref={mergedRef}\n {...getReferenceProps()}\n style={{\n width: isFluid === true ? '100%' : 'fit-content',\n }}\n >\n <label className=\"ndl-time-picker-label\">\n {label !== undefined && (\n <Typography\n variant={size === 'large' ? 'body-large' : 'body-medium'}\n >\n {label}\n </Typography>\n )}\n <div\n className=\"ndl-time-picker-input-wrapper\"\n style={{\n width: inputWidth,\n ...style,\n }}\n >\n <input\n role=\"combobox\"\n aria-expanded={isPopoverOpen}\n aria-controls={listboxId}\n aria-activedescendant={\n isPopoverOpen && focusedIndex >= 0\n ? `${listboxId}-option-${focusedIndex}`\n : undefined\n }\n aria-label={label} // TODO: handle label natively\n aria-invalid={Boolean(errorToShow)}\n aria-describedby={errorToShow ? errorTextId : undefined}\n className=\"ndl-time-picker-input\"\n type=\"text\"\n ref={inputRef}\n value={inputValue}\n disabled={isDisabled}\n readOnly={isReadOnly}\n required={isRequired}\n onChange={newHandleInputChange}\n onKeyDown={handleKeyDown}\n onClick={() => {\n if (isReadOnly === true || isDisabled === true) {\n return;\n }\n setIsPopoverOpen(true);\n }}\n onBlur={(e) => {\n if (isReadOnly === true || isDisabled === true) {\n return;\n }\n\n if (\n e.relatedTarget?.classList.contains(\n 'ndl-time-picker-popover-item',\n ) === true\n ) {\n return;\n }\n\n if (inputValue.length < 4) {\n setError('Invalid time');\n return;\n }\n\n const time = NeedleTime.fromString(inputValue);\n\n if (time === undefined || time === null) {\n setError('Invalid time');\n return;\n }\n\n if (!isValidTime(time.hour, time.minute, time.second)) {\n setError('Invalid time');\n } else {\n setError(undefined);\n setInputValue(time.toString(is24Hour, hasSeconds));\n setEditedInput(time);\n onChange?.(time);\n }\n }}\n placeholder={format}\n // The typed value can never be longer than the format pattern.\n maxLength={format.length}\n {...restProps}\n {...htmlAttributes}\n />\n <ClockIconOutline className=\"ndl-icon-svg ndl-time-picker-icon\" />\n </div>\n </label>\n {errorToShow !== undefined && (\n <div className=\"ndl-time-picker-error-wrapper\" role=\"status\">\n <ExclamationCircleIconSolid className=\"ndl-time-picker-error-icon\" />\n <Typography\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n className=\"ndl-time-picker-error-text\"\n htmlAttributes={{ id: errorTextId }}\n >\n {errorToShow}\n </Typography>\n </div>\n )}\n </div>\n\n {context.open && (\n <ConditionalWrap\n shouldWrap={isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal>{wrapChildren}</FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n >\n <div\n ref={refs.setFloating}\n className={classNames(themeClassName, 'ndl-time-picker-popover', {\n ...classes,\n })}\n style={{\n ...transitionStyles,\n ...floatingStyles,\n width:\n isFluid === true\n ? containerRef.current?.clientWidth\n : undefined,\n }}\n {...getFloatingProps()}\n >\n <ul ref={listRef} role=\"listbox\" id={listboxId} tabIndex={-1}>\n {timeOptions.map((time, i) => (\n <li\n id={`${listboxId}-option-${i}`}\n key={i}\n role=\"option\"\n aria-selected={\n value?.toString(is24Hour, hasSeconds) === time ||\n editedInput?.toString(is24Hour, hasSeconds) === time\n }\n value={time}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n handleOnClick(time);\n setIsPopoverOpen(false);\n }}\n onMouseDown={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n tabIndex={-1}\n className={classNames(\n focusedIndex === i ? 'focused' : '',\n 'ndl-time-picker-popover-item',\n )}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.stopPropagation();\n handleOnClick(time);\n }\n }}\n >\n {time}\n </li>\n ))}\n </ul>\n </div>\n </FloatingFocusManager>\n </ConditionalWrap>\n )}\n </>\n );\n};\n"]}
|
|
@@ -43,7 +43,7 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
43
43
|
const react_2 = require("react");
|
|
44
44
|
const conditional_wrap_1 = require("../conditional-wrap");
|
|
45
45
|
const dialog_context_1 = require("../dialog/dialog-context");
|
|
46
|
-
const
|
|
46
|
+
const ExclamationCircleIconSolid_1 = require("../icons/generated/heroIcons/ExclamationCircleIconSolid");
|
|
47
47
|
const theme_1 = require("../theme");
|
|
48
48
|
const typography_1 = require("../typography");
|
|
49
49
|
const generate_timezone_options_1 = require("./generate-timezone-options");
|
|
@@ -288,7 +288,7 @@ const TimeZonePicker = (_a) => {
|
|
|
288
288
|
? 'Select timezone'
|
|
289
289
|
: mode === 'utc'
|
|
290
290
|
? 'Select or type UTC offset (e.g., UTC+5:30)'
|
|
291
|
-
: 'Select timezone or type UTC offset' }, htmlAttributes, restProps)), (0, jsx_runtime_1.jsx)(outline_1.ChevronDownIcon, { className: "ndl-icon-svg ndl-timezone-picker-icon" })] })] }), errorToShow !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-timezone-picker-error-wrapper", role: "status", children: [(0, jsx_runtime_1.jsx)(
|
|
291
|
+
: 'Select timezone or type UTC offset' }, htmlAttributes, restProps)), (0, jsx_runtime_1.jsx)(outline_1.ChevronDownIcon, { className: "ndl-icon-svg ndl-timezone-picker-icon" })] })] }), errorToShow !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-timezone-picker-error-wrapper", role: "status", children: [(0, jsx_runtime_1.jsx)(ExclamationCircleIconSolid_1.ExclamationCircleIconSolid, { className: "ndl-timezone-picker-error-icon" }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-timezone-picker-error-text", htmlAttributes: { id: errorTextId }, children: errorToShow })] }))] })), context.open && ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPortaled, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { children: wrapChildren })), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, initialFocus: -1, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.setFloating, className: (0, classnames_1.default)(themeClassName, 'ndl-timezone-picker-popover', Object.assign({}, classes)), style: Object.assign(Object.assign(Object.assign({}, transitionStyles), floatingStyles), { width: isFluid === true
|
|
292
292
|
? (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth
|
|
293
293
|
: undefined }) }, getFloatingProps(), { children: (0, jsx_runtime_1.jsx)("ul", { ref: listRef, role: "listbox", id: listboxId, tabIndex: -1, children: mode === 'both' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [utcOptions.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("li", { className: "ndl-timezone-picker-section-header", children: "UTC Offsets" }), utcOptions.map((option, i) => ((0, jsx_runtime_1.jsx)("li", { id: `${listboxId}-option-${i}`, role: "option", "aria-selected": value === option.value, value: option.value, onClick: (e) => {
|
|
294
294
|
e.stopPropagation();
|