@neo4j-ndl/react 4.22.0 → 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.
- package/lib/cjs/_common/form-control/FormFieldLabel.js +52 -0
- package/lib/cjs/_common/form-control/FormFieldLabel.js.map +1 -0
- package/lib/cjs/_common/form-control/FormFieldMessage.js +72 -0
- package/lib/cjs/_common/form-control/FormFieldMessage.js.map +1 -0
- package/lib/cjs/_common/form-control/form-control-types.js +23 -0
- package/lib/cjs/_common/form-control/form-control-types.js.map +1 -0
- package/lib/cjs/_common/form-control/index.js +39 -0
- package/lib/cjs/_common/form-control/index.js.map +1 -0
- package/lib/cjs/_common/form-control/use-form-field.js +76 -0
- package/lib/cjs/_common/form-control/use-form-field.js.map +1 -0
- package/lib/cjs/_common/form-control/use-inline-field-label.js +76 -0
- package/lib/cjs/_common/form-control/use-inline-field-label.js.map +1 -0
- package/lib/cjs/checkbox/Checkbox.js +9 -21
- package/lib/cjs/checkbox/Checkbox.js.map +1 -1
- package/lib/cjs/combobox/Combobox.js +61 -45
- package/lib/cjs/combobox/Combobox.js.map +1 -1
- package/lib/cjs/combobox/combobox-types.js.map +1 -1
- package/lib/cjs/date-picker/DatePicker.js.map +1 -1
- package/lib/cjs/radio/Radio.js +12 -22
- package/lib/cjs/radio/Radio.js.map +1 -1
- package/lib/cjs/select/Select.js +14 -5
- package/lib/cjs/select/Select.js.map +1 -1
- package/lib/cjs/select/types.js.map +1 -1
- package/lib/cjs/switch/Switch.js +9 -21
- package/lib/cjs/switch/Switch.js.map +1 -1
- package/lib/cjs/text-area/TextArea.js +8 -21
- package/lib/cjs/text-area/TextArea.js.map +1 -1
- package/lib/cjs/text-input/TextInput.js +15 -38
- package/lib/cjs/text-input/TextInput.js.map +1 -1
- package/lib/cjs/text-input/stories/text-input-sizes.story.js +1 -1
- package/lib/cjs/text-input/stories/text-input-sizes.story.js.map +1 -1
- package/lib/cjs/time-picker/TimePicker.js +13 -7
- package/lib/cjs/time-picker/TimePicker.js.map +1 -1
- package/lib/cjs/timezone-picker/TimeZonePicker.js +13 -7
- package/lib/cjs/timezone-picker/TimeZonePicker.js.map +1 -1
- package/lib/esm/_common/form-control/FormFieldLabel.js +45 -0
- package/lib/esm/_common/form-control/FormFieldLabel.js.map +1 -0
- package/lib/esm/_common/form-control/FormFieldMessage.js +65 -0
- package/lib/esm/_common/form-control/FormFieldMessage.js.map +1 -0
- package/lib/esm/_common/form-control/form-control-types.js +22 -0
- package/lib/esm/_common/form-control/form-control-types.js.map +1 -0
- package/lib/esm/_common/form-control/index.js +32 -0
- package/lib/esm/_common/form-control/index.js.map +1 -0
- package/lib/esm/_common/form-control/use-form-field.js +72 -0
- package/lib/esm/_common/form-control/use-form-field.js.map +1 -0
- package/lib/esm/_common/form-control/use-inline-field-label.js +69 -0
- package/lib/esm/_common/form-control/use-inline-field-label.js.map +1 -0
- package/lib/esm/checkbox/Checkbox.js +10 -22
- package/lib/esm/checkbox/Checkbox.js.map +1 -1
- package/lib/esm/combobox/Combobox.js +62 -46
- package/lib/esm/combobox/Combobox.js.map +1 -1
- package/lib/esm/combobox/combobox-types.js.map +1 -1
- package/lib/esm/date-picker/DatePicker.js.map +1 -1
- package/lib/esm/radio/Radio.js +12 -22
- package/lib/esm/radio/Radio.js.map +1 -1
- package/lib/esm/select/Select.js +14 -5
- package/lib/esm/select/Select.js.map +1 -1
- package/lib/esm/select/types.js.map +1 -1
- package/lib/esm/switch/Switch.js +10 -22
- package/lib/esm/switch/Switch.js.map +1 -1
- package/lib/esm/text-area/TextArea.js +9 -22
- package/lib/esm/text-area/TextArea.js.map +1 -1
- package/lib/esm/text-input/TextInput.js +15 -38
- package/lib/esm/text-input/TextInput.js.map +1 -1
- package/lib/esm/text-input/stories/text-input-sizes.story.js +1 -1
- package/lib/esm/text-input/stories/text-input-sizes.story.js.map +1 -1
- package/lib/esm/time-picker/TimePicker.js +13 -7
- package/lib/esm/time-picker/TimePicker.js.map +1 -1
- package/lib/esm/timezone-picker/TimeZonePicker.js +13 -7
- package/lib/esm/timezone-picker/TimeZonePicker.js.map +1 -1
- package/lib/types/_common/form-control/FormFieldLabel.d.ts +58 -0
- package/lib/types/_common/form-control/FormFieldLabel.d.ts.map +1 -0
- package/lib/types/_common/form-control/FormFieldMessage.d.ts +46 -0
- package/lib/types/_common/form-control/FormFieldMessage.d.ts.map +1 -0
- package/lib/types/_common/form-control/form-control-types.d.ts +92 -0
- package/lib/types/_common/form-control/form-control-types.d.ts.map +1 -0
- package/lib/types/_common/form-control/index.d.ts +33 -0
- package/lib/types/_common/form-control/index.d.ts.map +1 -0
- package/lib/types/_common/form-control/use-form-field.d.ts +53 -0
- package/lib/types/_common/form-control/use-form-field.d.ts.map +1 -0
- package/lib/types/_common/form-control/use-inline-field-label.d.ts +69 -0
- package/lib/types/_common/form-control/use-inline-field-label.d.ts.map +1 -0
- package/lib/types/checkbox/Checkbox.d.ts.map +1 -1
- package/lib/types/combobox/Combobox.d.ts.map +1 -1
- package/lib/types/combobox/combobox-types.d.ts +1 -1
- package/lib/types/combobox/combobox-types.d.ts.map +1 -1
- package/lib/types/radio/Radio.d.ts.map +1 -1
- package/lib/types/select/Select.d.ts.map +1 -1
- package/lib/types/select/types.d.ts.map +1 -1
- package/lib/types/switch/Switch.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-input/stories/text-input-sizes.story.d.ts.map +1 -1
- package/lib/types/time-picker/TimePicker.d.ts +3 -1
- package/lib/types/time-picker/TimePicker.d.ts.map +1 -1
- package/lib/types/timezone-picker/TimeZonePicker.d.ts +4 -1
- package/lib/types/timezone-picker/TimeZonePicker.d.ts.map +1 -1
- package/package.json +2 -2
- package/skills/ndl-react/SKILL.md +1 -1
- package/skills/ndl-react/components/color-picker.md +32 -32
- package/skills/ndl-react/components/combobox.md +2 -2
- package/skills/ndl-react/components/dropzone.md +5 -5
- package/skills/ndl-react/components/next/tree-view.md +87 -1
- package/skills/ndl-react/components/text-input.md +6 -0
- package/skills/ndl-react/components/time-picker.md +1 -0
- package/skills/ndl-react/components/timezone-picker.md +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-types.js","sourceRoot":"","sources":["../../../src/combobox/combobox-types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG","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\ntype ComboboxOption = {\n label: string;\n value: string;\n /** If the option is disabled */\n isDisabled?: boolean;\n /** A visual element to display before the label. Incompatible with multi select. */\n leadingVisual?: React.ReactNode;\n /** A description to display below the label. */\n description?: string;\n};\n\ntype ComboboxOptionGroup<TOption extends ComboboxOption = ComboboxOption> = {\n label: string;\n options: TOption[];\n};\n\ntype ComboboxFilterOption<TOption extends ComboboxOption = ComboboxOption> =\n | ((option: TOption, searchValue: string) => boolean)\n | false;\n\ntype ComboboxSize = 'small' | 'medium' | 'large';\n\n/**\n * A row at the end of the panel that acts instead of selecting.\n *\n * @remarks\n * Deliberately not a `ComboboxOption`, since an action never becomes part of\n * the value. Use it for something that leads out of the selection, such as a\n * link into a create flow.\n */\ntype ComboboxAction = {\n /** Text of the row. */\n label: string;\n /**\n * Called when the row is activated, with the current search value so the\n * action can carry the query with it. The selection is left untouched.\n */\n onSelect: (context: { searchValue: string }) => void;\n /** A description to display below the label. */\n description?: string;\n /** A visual element to display before the label. */\n leadingVisual?: React.ReactNode;\n /** If the action is disabled. */\n isDisabled?: boolean;\n /**\n * Whether a divider is rendered above the action, separating it from the\n * action before it. Ignored on the first action, which already sits below\n * the divider that separates actions from options.\n */\n hasDivider?: boolean;\n};\n\ntype ComboboxBaseProps<TOption extends ComboboxOption = ComboboxOption> = {\n /** Accessible label for the combobox. Rendered above the control. */\n label: string;\n /**\n * Name used to submit the selected option value through a native form.\n * Above 300 options, only the selection is mirrored to the form, so browser\n * autofill no longer offers the option list.\n */\n name?: string;\n /** Id of the form the combobox belongs to when it is outside that form. */\n formId?: string;\n /** Hint for browser autofill on the native form control. */\n autoComplete?: string;\n /** Ref to the focusable combobox trigger. */\n triggerRef?: React.Ref<HTMLElement>;\n /** Whether the label is clipped out of the layout, leaving it to screen readers only. */\n hasVisuallyHiddenLabel?: boolean;\n /** Assistive text below the control. Replaced by `errorText` while there is an error. */\n helpText?: React.ReactNode;\n /** Error message below the control. Puts the control in its error state. */\n errorText?: React.ReactNode;\n /**\n * Whether a selection is required. Sets `aria-required` and, when `name` is\n * provided, enables native form validation.\n */\n isRequired?: boolean;\n /** Whether Required or Optional is shown at the end of the label row. */\n hasRequiredIndicator?: boolean;\n /** The options to display in the combobox. Either an array of options or an array of option groups. */\n options: TOption[] | ComboboxOptionGroup<TOption>[];\n /**\n * Whether a search input is rendered inside the panel. On by default; turn\n * it off for a short list (roughly 10 options or fewer) where filtering\n * adds nothing.\n */\n isSearchable?: boolean;\n /** The search value in controlled mode. */\n searchValue?: string;\n /** The initial search value in uncontrolled mode. */\n defaultSearchValue?: string;\n /** Called when the search value changes. */\n onSearchChange?: (searchValue: string) => void;\n /**\n * How options are matched against the search value. Defaults to a\n * case-insensitive match on the option label. Pass `false` to skip internal\n * filtering when the options are already filtered, such as when searching\n * server side.\n */\n filterOption?: ComboboxFilterOption<TOption>;\n /** Placeholder for the search input, which also names it. */\n searchPlaceholder?: string;\n /**\n * Whether the panel is waiting for options. Replaces the empty message while\n * there are no options.\n */\n isLoading?: boolean;\n /** Text of the loading status. Defaults to `Loading...`. */\n loadingMessage?: React.ReactNode;\n /**\n * Whether the search value can be turned into a new option, shown as an extra\n * row at the end of the list. Requires `isSearchable`.\n */\n isCreatable?: boolean;\n /**\n * Called after a created option has been selected, so it can be persisted\n * into `options`. Created options are not added to `options` by the combobox.\n */\n onCreateOption?: (option: TOption) => void;\n /**\n * Builds the option to create from the search value. Defaults to using the\n * search value as both label and value, which is only enough when the options\n * carry no fields of their own beyond `ComboboxOption`.\n */\n createOption?: (searchValue: string) => TOption;\n /** Text of the create row. Defaults to `Create \"<search value>\"`. */\n formatCreateLabel?: (searchValue: string) => React.ReactNode;\n /**\n * Whether the search value can become a new option. Defaults to requiring a\n * non-blank value that does not exactly match an existing option or a\n * currently selected one.\n */\n isValidNewOption?: (searchValue: string, options: TOption[]) => boolean;\n /**\n * Rows that act instead of selecting, pinned below the scrolling options\n * after a divider so they stay visible however long the list is. They are\n * always shown, never filtered by the search value, and never part of the\n * selection.\n */\n actions?: ComboboxAction[];\n /** Whether the panel is controlled open. */\n isOpen?: boolean;\n /** Called when the panel opens or closes. */\n onOpenChange?: (isOpen: boolean) => void;\n /** Whether a button for clearing the selection is rendered in the trigger. */\n isClearable?: boolean;\n /** Text shown in the trigger while nothing is selected. */\n placeholder?: string;\n /** Whether the combobox is disabled. */\n isDisabled?: boolean;\n /** Size of the combobox control. */\n size?: ComboboxSize;\n /** Whether the combobox fills the available width. */\n isFluid?: boolean;\n /** Whether the control hugs its content without a background or resting outline. */\n isClean?: boolean;\n /** Whether the panel is wrapped in a floating portal. Defaults to true outside a dialog. */\n isPortaled?: boolean;\n /** Portal target element. Defaults to `document.body`. */\n portalTarget?: HTMLElement | null;\n /** Positioning strategy used by Floating UI. */\n floatingStrategy?: 'absolute' | 'fixed';\n /**\n * Replaces the built-in trigger. Spread `triggerProps` onto the focusable\n * element that should open the panel; the panel is anchored to it. The root\n * element then lays out as `display: contents`, so the trigger is placed by\n * whatever contains the combobox, and `isFluid`, `isClean`, `size`,\n * `className` and `style` no longer shape it.\n */\n renderTrigger?: (\n triggerProps: ComboboxTriggerProps,\n state: ComboboxTriggerState<TOption>,\n ) => React.ReactNode;\n /**\n * Replaces how selected values and option labels are presented, keeping the\n * behavior and the ARIA of the combobox.\n */\n components?: ComboboxComponents<TOption>;\n};\n\n/**\n * Presentation overrides for the parts of the combobox that show an option.\n *\n * @remarks\n * Each override is handed the option itself, so widening the option type is\n * what gives them typed access to fields of your own, such as a color. Only\n * presentation is replaced; selection, filtering, keyboard interaction and the\n * ARIA of the surrounding elements stay with the combobox. Use `renderTrigger`\n * instead to replace the control as a whole.\n */\ntype ComboboxComponents<TOption extends ComboboxOption = ComboboxOption> = {\n /** Replaces the tag rendered per selected option in multi select. */\n MultiValue?: React.ComponentType<ComboboxMultiValueProps<TOption>>;\n /** Replaces the value shown in the trigger in single select. Must be non-interactive. */\n SingleValue?: React.ComponentType<ComboboxSingleValueProps<TOption>>;\n /** Replaces the label of an option. The selection and description chrome stays. */\n OptionLabel?: React.ComponentType<ComboboxOptionLabelProps<TOption>>;\n};\n\n/** Props of a `MultiValue` override, rendered once per selected option. */\ntype ComboboxMultiValueProps<TOption extends ComboboxOption = ComboboxOption> =\n {\n option: TOption;\n /** Position of the option in the selection. */\n index: number;\n isDisabled: boolean;\n size: ComboboxSize;\n /**\n * Deselects this option. Nothing calls it unless the override renders an\n * affordance for it, which also makes focus after the removal its own\n * responsibility.\n */\n remove: () => void;\n };\n\n/** Props of a `SingleValue` override, rendered inside the trigger. */\ntype ComboboxSingleValueProps<TOption extends ComboboxOption = ComboboxOption> =\n {\n option: TOption;\n isDisabled: boolean;\n size: ComboboxSize;\n };\n\n/** Props of an `OptionLabel` override, rendered inside each option. */\ntype ComboboxOptionLabelProps<TOption extends ComboboxOption = ComboboxOption> =\n {\n option: TOption;\n isSelected: boolean;\n isDisabled: boolean;\n /** Whether the option currently holds virtual focus. */\n isFocused: boolean;\n isMulti: boolean;\n size: ComboboxSize;\n };\n\n/**\n * Props that must be spread onto a custom trigger element. Includes the\n * Floating UI reference props, so the element it lands on becomes the anchor\n * the panel is positioned against.\n */\ntype ComboboxTriggerProps = React.HTMLAttributes<HTMLElement> & {\n ref: React.Ref<HTMLElement>;\n role: 'combobox';\n 'aria-haspopup': 'dialog' | 'listbox';\n // These are DOM attribute names, so the boolean naming convention cannot apply.\n /* eslint-disable @typescript-eslint/naming-convention */\n 'aria-expanded': boolean;\n 'aria-disabled': boolean | undefined;\n 'aria-invalid': boolean | undefined;\n 'aria-required': boolean | undefined;\n /* eslint-enable @typescript-eslint/naming-convention */\n 'aria-controls': string | undefined;\n 'aria-activedescendant': string | undefined;\n 'aria-describedby': string | undefined;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n};\n\n/**\n * The label, help text, and error text of the combobox, for rendering them from\n * a custom trigger.\n *\n * @remarks\n * A custom trigger is named through `aria-label` and carries the\n * `aria-describedby` of whichever message is currently shown, so it has to\n * render that message with the id it is handed here.\n */\ntype ComboboxFieldState = {\n label: string;\n hasVisuallyHiddenLabel: boolean;\n helpText?: React.ReactNode;\n errorText?: React.ReactNode;\n hasError: boolean;\n isRequired: boolean;\n hasRequiredIndicator: boolean;\n /** Id the trigger's `aria-labelledby` points at when the label is rendered. */\n labelId: string;\n /** Id of the trigger, so a rendered `<label>` can point at it with `htmlFor`. */\n triggerId: string;\n /** Ids the trigger's `aria-describedby` points at. Only one is used at a time. */\n helpTextId: string;\n errorTextId: string;\n};\n\n/** Current combobox state, for rendering a custom trigger. */\ntype ComboboxTriggerState<TOption extends ComboboxOption = ComboboxOption> = {\n isOpen: boolean;\n isMulti: boolean;\n isDisabled: boolean;\n /** The selected options, as a list in both single and multi select. */\n selectedOptions: TOption[];\n /** Clears the whole selection. */\n clear: () => void;\n /** Deselects a single option. */\n remove: (option: TOption) => void;\n /** The label and messages of the combobox, so a custom trigger can present them. */\n field: ComboboxFieldState;\n};\n\ntype ComboboxSingleProps<TOption extends ComboboxOption = ComboboxOption> = {\n /** The selected option in controlled mode. */\n value?: TOption | null;\n /** The initially selected option in uncontrolled mode. */\n defaultValue?: TOption | null;\n /** Called when the selected option changes. `null` when the selection is cleared. */\n onChange?: (value: TOption | null) => void;\n /** Whether multiple options can be selected. */\n isMulti?: false;\n maxRows?: never;\n};\n\ntype ComboboxMultiProps<TOption extends ComboboxOption = ComboboxOption> = {\n /** The selected options in controlled mode. */\n value?: TOption[];\n /** The initially selected options in uncontrolled mode. */\n defaultValue?: TOption[];\n /** Called when the selected options change. */\n onChange?: (value: TOption[]) => void;\n /** Whether multiple options can be selected. */\n isMulti: true;\n /**\n * Maximum number of rows the selected tags may wrap into, a single row by\n * default. Tags that do not fit are collapsed into a read-only counter tag,\n * such as `+4`, at the end of the last row. Pass `null` to let the control\n * grow with the selection.\n */\n maxRows?: number | null;\n};\n\ntype ComboboxProps<TOption extends ComboboxOption = ComboboxOption> =\n ComboboxBaseProps<TOption> &\n (ComboboxSingleProps<TOption> | ComboboxMultiProps<TOption>);\n\ntype ComboboxPanelProps = {\n children?: React.ReactNode;\n ref?: React.Ref<HTMLDivElement>;\n id?: string;\n className?: string;\n style?: React.CSSProperties;\n /**\n * Set when the panel is a dialog popup, which is the case while the search\n * input inside it holds DOM focus.\n */\n ariaLabel?: string;\n isDialog?: boolean;\n} & Record<string, unknown>;\n\ntype ComboboxControlProps<TOption extends ComboboxOption = ComboboxOption> = {\n triggerProps: ComboboxTriggerProps;\n state: ComboboxTriggerState<TOption>;\n field: ComboboxFieldState;\n placeholder: string;\n isClearable: boolean;\n isClean: boolean;\n size: ComboboxSize;\n /** Maximum number of rows the selected tags may wrap into in multi select. `null` is unlimited. */\n maxRows?: number | null;\n components: ComboboxComponents<TOption>;\n /** Floating UI reference props, so clicking anywhere in the control opens the panel. */\n referenceProps: React.HTMLAttributes<HTMLDivElement>;\n referenceRef: React.Ref<HTMLDivElement>;\n};\n\ntype ComboboxEmptyStateProps = {\n children?: React.ReactNode;\n};\n\ntype ComboboxInputProps = {\n ref?: React.Ref<HTMLInputElement>;\n ariaLabel: string;\n value: string;\n onValueChange: (searchValue: string) => void;\n placeholder?: string;\n /** Id of the listbox the input controls, when the listbox is rendered. */\n listboxId?: string;\n /** Id of the virtually focused option, when one is active. */\n activeOptionId?: string;\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n};\n\ntype ComboboxListBoxProps = {\n ariaLabel: string;\n children?: React.ReactNode;\n isMulti?: boolean;\n id?: string;\n /** Ids of the pinned action rows the listbox owns without containing. */\n ownsIds?: string;\n};\n\ntype ComboboxGroupProps = {\n children?: React.ReactNode;\n label: string;\n};\n\ntype ComboboxOptionProps = {\n children?: React.ReactNode;\n /** Left out on rows that cannot be selected, which drops `aria-selected`. */\n isSelected?: boolean;\n isDisabled?: boolean;\n isFocused?: boolean;\n /** Whether the option is the row that creates a new option from the search value. */\n isCreate?: boolean;\n /** Whether the option is an action row, which acts instead of selecting. */\n isAction?: boolean;\n id?: string;\n onClick?: () => void;\n /** Called when the pointer moves over the option, so hover can drive virtual focus. */\n onHover?: () => void;\n /**\n * One-based position in the full list. Only set while the listbox is\n * virtualized, where the DOM no longer holds every option.\n */\n posInSet?: number;\n /** Total options in the full list. Only set while the listbox is virtualized. */\n setSize?: number;\n};\n\ntype ComboboxOptionContentProps = {\n label: string;\n /**\n * Replaces the label text. Rendered in place of the label typography rather\n * than inside it, so it can be any element rather than inline text.\n */\n customLabel?: React.ReactNode;\n description?: string;\n leadingVisual?: React.ReactNode;\n isDisabled?: boolean;\n isSelected?: boolean;\n isMulti?: boolean;\n};\n\nexport type {\n ComboboxProps,\n ComboboxAction,\n ComboboxComponents,\n ComboboxControlProps,\n ComboboxFieldState,\n ComboboxMultiValueProps,\n ComboboxOptionLabelProps,\n ComboboxSingleValueProps,\n ComboboxTriggerProps,\n ComboboxTriggerState,\n ComboboxPanelProps,\n ComboboxEmptyStateProps,\n ComboboxFilterOption,\n ComboboxInputProps,\n ComboboxListBoxProps,\n ComboboxGroupProps,\n ComboboxOptionProps,\n ComboboxOptionContentProps,\n ComboboxOption,\n ComboboxOptionGroup,\n ComboboxSize,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"combobox-types.js","sourceRoot":"","sources":["../../../src/combobox/combobox-types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG","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\ntype ComboboxOption = {\n label: string;\n value: string;\n /** If the option is disabled */\n isDisabled?: boolean;\n /** A visual element to display before the label. Incompatible with multi select. */\n leadingVisual?: React.ReactNode;\n /** A description to display below the label. */\n description?: string;\n};\n\ntype ComboboxOptionGroup<TOption extends ComboboxOption = ComboboxOption> = {\n label: string;\n options: TOption[];\n};\n\ntype ComboboxFilterOption<TOption extends ComboboxOption = ComboboxOption> =\n | ((option: TOption, searchValue: string) => boolean)\n | false;\n\ntype ComboboxSize = 'small' | 'medium' | 'large';\n\n/**\n * A row at the end of the panel that acts instead of selecting.\n *\n * @remarks\n * Deliberately not a `ComboboxOption`, since an action never becomes part of\n * the value. Use it for something that leads out of the selection, such as a\n * link into a create flow.\n */\ntype ComboboxAction = {\n /** Text of the row. */\n label: string;\n /**\n * Called when the row is activated, with the current search value so the\n * action can carry the query with it. The selection is left untouched.\n */\n onSelect: (context: { searchValue: string }) => void;\n /** A description to display below the label. */\n description?: string;\n /** A visual element to display before the label. */\n leadingVisual?: React.ReactNode;\n /** If the action is disabled. */\n isDisabled?: boolean;\n /**\n * Whether a divider is rendered above the action, separating it from the\n * action before it. Ignored on the first action, which already sits below\n * the divider that separates actions from options.\n */\n hasDivider?: boolean;\n};\n\ntype ComboboxBaseProps<TOption extends ComboboxOption = ComboboxOption> = {\n /** Accessible label for the combobox. Rendered above the control. */\n label: string;\n /**\n * Name used to submit the selected option value through a native form.\n * Above 300 options, only the selection is mirrored to the form, so browser\n * autofill no longer offers the option list.\n */\n name?: string;\n /** Id of the form the combobox belongs to when it is outside that form. */\n formId?: string;\n /** Hint for browser autofill on the native form control. */\n autoComplete?: string;\n /** Ref to the focusable combobox trigger. */\n triggerRef?: React.Ref<HTMLElement>;\n /** Whether the label is clipped out of the layout, leaving it to screen readers only. */\n hasVisuallyHiddenLabel?: boolean;\n /** Assistive text below the control. Replaced by `errorText` while there is an error. */\n helpText?: React.ReactNode;\n /** Error message below the control. Puts the control in its error state. */\n errorText?: React.ReactNode;\n /**\n * Whether a selection is required. Sets `aria-required` and, when `name` is\n * provided, enables native form validation.\n */\n isRequired?: boolean;\n /** Whether Required or Optional is shown at the end of the label row, based on the `isRequired` prop */\n hasRequiredIndicator?: boolean;\n /** The options to display in the combobox. Either an array of options or an array of option groups. */\n options: TOption[] | ComboboxOptionGroup<TOption>[];\n /**\n * Whether a search input is rendered inside the panel. On by default; turn\n * it off for a short list (roughly 10 options or fewer) where filtering\n * adds nothing.\n */\n isSearchable?: boolean;\n /** The search value in controlled mode. */\n searchValue?: string;\n /** The initial search value in uncontrolled mode. */\n defaultSearchValue?: string;\n /** Called when the search value changes. */\n onSearchChange?: (searchValue: string) => void;\n /**\n * How options are matched against the search value. Defaults to a\n * case-insensitive match on the option label. Pass `false` to skip internal\n * filtering when the options are already filtered, such as when searching\n * server side.\n */\n filterOption?: ComboboxFilterOption<TOption>;\n /** Placeholder for the search input, which also names it. */\n searchPlaceholder?: string;\n /**\n * Whether the panel is waiting for options. Replaces the empty message while\n * there are no options.\n */\n isLoading?: boolean;\n /** Text of the loading status. Defaults to `Loading...`. */\n loadingMessage?: React.ReactNode;\n /**\n * Whether the search value can be turned into a new option, shown as an extra\n * row at the end of the list. Requires `isSearchable`.\n */\n isCreatable?: boolean;\n /**\n * Called after a created option has been selected, so it can be persisted\n * into `options`. Created options are not added to `options` by the combobox.\n */\n onCreateOption?: (option: TOption) => void;\n /**\n * Builds the option to create from the search value. Defaults to using the\n * search value as both label and value, which is only enough when the options\n * carry no fields of their own beyond `ComboboxOption`.\n */\n createOption?: (searchValue: string) => TOption;\n /** Text of the create row. Defaults to `Create \"<search value>\"`. */\n formatCreateLabel?: (searchValue: string) => React.ReactNode;\n /**\n * Whether the search value can become a new option. Defaults to requiring a\n * non-blank value that does not exactly match an existing option or a\n * currently selected one.\n */\n isValidNewOption?: (searchValue: string, options: TOption[]) => boolean;\n /**\n * Rows that act instead of selecting, pinned below the scrolling options\n * after a divider so they stay visible however long the list is. They are\n * always shown, never filtered by the search value, and never part of the\n * selection.\n */\n actions?: ComboboxAction[];\n /** Whether the panel is controlled open. */\n isOpen?: boolean;\n /** Called when the panel opens or closes. */\n onOpenChange?: (isOpen: boolean) => void;\n /** Whether a button for clearing the selection is rendered in the trigger. */\n isClearable?: boolean;\n /** Text shown in the trigger while nothing is selected. */\n placeholder?: string;\n /** Whether the combobox is disabled. */\n isDisabled?: boolean;\n /** Size of the combobox control. */\n size?: ComboboxSize;\n /** Whether the combobox fills the available width. */\n isFluid?: boolean;\n /** Whether the control hugs its content without a background or resting outline. */\n isClean?: boolean;\n /** Whether the panel is wrapped in a floating portal. Defaults to true outside a dialog. */\n isPortaled?: boolean;\n /** Portal target element. Defaults to `document.body`. */\n portalTarget?: HTMLElement | null;\n /** Positioning strategy used by Floating UI. */\n floatingStrategy?: 'absolute' | 'fixed';\n /**\n * Replaces the built-in trigger. Spread `triggerProps` onto the focusable\n * element that should open the panel; the panel is anchored to it. The root\n * element then lays out as `display: contents`, so the trigger is placed by\n * whatever contains the combobox, and `isFluid`, `isClean`, `size`,\n * `className` and `style` no longer shape it.\n */\n renderTrigger?: (\n triggerProps: ComboboxTriggerProps,\n state: ComboboxTriggerState<TOption>,\n ) => React.ReactNode;\n /**\n * Replaces how selected values and option labels are presented, keeping the\n * behavior and the ARIA of the combobox.\n */\n components?: ComboboxComponents<TOption>;\n};\n\n/**\n * Presentation overrides for the parts of the combobox that show an option.\n *\n * @remarks\n * Each override is handed the option itself, so widening the option type is\n * what gives them typed access to fields of your own, such as a color. Only\n * presentation is replaced; selection, filtering, keyboard interaction and the\n * ARIA of the surrounding elements stay with the combobox. Use `renderTrigger`\n * instead to replace the control as a whole.\n */\ntype ComboboxComponents<TOption extends ComboboxOption = ComboboxOption> = {\n /** Replaces the tag rendered per selected option in multi select. */\n MultiValue?: React.ComponentType<ComboboxMultiValueProps<TOption>>;\n /** Replaces the value shown in the trigger in single select. Must be non-interactive. */\n SingleValue?: React.ComponentType<ComboboxSingleValueProps<TOption>>;\n /** Replaces the label of an option. The selection and description chrome stays. */\n OptionLabel?: React.ComponentType<ComboboxOptionLabelProps<TOption>>;\n};\n\n/** Props of a `MultiValue` override, rendered once per selected option. */\ntype ComboboxMultiValueProps<TOption extends ComboboxOption = ComboboxOption> =\n {\n option: TOption;\n /** Position of the option in the selection. */\n index: number;\n isDisabled: boolean;\n size: ComboboxSize;\n /**\n * Deselects this option. Nothing calls it unless the override renders an\n * affordance for it, which also makes focus after the removal its own\n * responsibility.\n */\n remove: () => void;\n };\n\n/** Props of a `SingleValue` override, rendered inside the trigger. */\ntype ComboboxSingleValueProps<TOption extends ComboboxOption = ComboboxOption> =\n {\n option: TOption;\n isDisabled: boolean;\n size: ComboboxSize;\n };\n\n/** Props of an `OptionLabel` override, rendered inside each option. */\ntype ComboboxOptionLabelProps<TOption extends ComboboxOption = ComboboxOption> =\n {\n option: TOption;\n isSelected: boolean;\n isDisabled: boolean;\n /** Whether the option currently holds virtual focus. */\n isFocused: boolean;\n isMulti: boolean;\n size: ComboboxSize;\n };\n\n/**\n * Props that must be spread onto a custom trigger element. Includes the\n * Floating UI reference props, so the element it lands on becomes the anchor\n * the panel is positioned against.\n */\ntype ComboboxTriggerProps = React.HTMLAttributes<HTMLElement> & {\n ref: React.Ref<HTMLElement>;\n role: 'combobox';\n 'aria-haspopup': 'dialog' | 'listbox';\n // These are DOM attribute names, so the boolean naming convention cannot apply.\n /* eslint-disable @typescript-eslint/naming-convention */\n 'aria-expanded': boolean;\n 'aria-disabled': boolean | undefined;\n 'aria-invalid': boolean | undefined;\n 'aria-required': boolean | undefined;\n /* eslint-enable @typescript-eslint/naming-convention */\n 'aria-controls': string | undefined;\n 'aria-activedescendant': string | undefined;\n 'aria-describedby': string | undefined;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n};\n\n/**\n * The label, help text, and error text of the combobox, for rendering them from\n * a custom trigger.\n *\n * @remarks\n * A custom trigger is named through `aria-label` and carries the\n * `aria-describedby` of whichever message is currently shown, so it has to\n * render that message with the id it is handed here.\n */\ntype ComboboxFieldState = {\n label: string;\n hasVisuallyHiddenLabel: boolean;\n helpText?: React.ReactNode;\n errorText?: React.ReactNode;\n hasError: boolean;\n isRequired: boolean;\n hasRequiredIndicator: boolean;\n /** Id the trigger's `aria-labelledby` points at when the label is rendered. */\n labelId: string;\n /** Id of the trigger, so a rendered `<label>` can point at it with `htmlFor`. */\n triggerId: string;\n /** Ids the trigger's `aria-describedby` points at. Only one is used at a time. */\n helpTextId: string;\n errorTextId: string;\n};\n\n/** Current combobox state, for rendering a custom trigger. */\ntype ComboboxTriggerState<TOption extends ComboboxOption = ComboboxOption> = {\n isOpen: boolean;\n isMulti: boolean;\n isDisabled: boolean;\n /** The selected options, as a list in both single and multi select. */\n selectedOptions: TOption[];\n /** Clears the whole selection. */\n clear: () => void;\n /** Deselects a single option. */\n remove: (option: TOption) => void;\n /** The label and messages of the combobox, so a custom trigger can present them. */\n field: ComboboxFieldState;\n};\n\ntype ComboboxSingleProps<TOption extends ComboboxOption = ComboboxOption> = {\n /** The selected option in controlled mode. */\n value?: TOption | null;\n /** The initially selected option in uncontrolled mode. */\n defaultValue?: TOption | null;\n /** Called when the selected option changes. `null` when the selection is cleared. */\n onChange?: (value: TOption | null) => void;\n /** Whether multiple options can be selected. */\n isMulti?: false;\n maxRows?: never;\n};\n\ntype ComboboxMultiProps<TOption extends ComboboxOption = ComboboxOption> = {\n /** The selected options in controlled mode. */\n value?: TOption[];\n /** The initially selected options in uncontrolled mode. */\n defaultValue?: TOption[];\n /** Called when the selected options change. */\n onChange?: (value: TOption[]) => void;\n /** Whether multiple options can be selected. */\n isMulti: true;\n /**\n * Maximum number of rows the selected tags may wrap into, a single row by\n * default. Tags that do not fit are collapsed into a read-only counter tag,\n * such as `+4`, at the end of the last row. Pass `null` to let the control\n * grow with the selection.\n */\n maxRows?: number | null;\n};\n\ntype ComboboxProps<TOption extends ComboboxOption = ComboboxOption> =\n ComboboxBaseProps<TOption> &\n (ComboboxSingleProps<TOption> | ComboboxMultiProps<TOption>);\n\ntype ComboboxPanelProps = {\n children?: React.ReactNode;\n ref?: React.Ref<HTMLDivElement>;\n id?: string;\n className?: string;\n style?: React.CSSProperties;\n /**\n * Set when the panel is a dialog popup, which is the case while the search\n * input inside it holds DOM focus.\n */\n ariaLabel?: string;\n isDialog?: boolean;\n} & Record<string, unknown>;\n\ntype ComboboxControlProps<TOption extends ComboboxOption = ComboboxOption> = {\n triggerProps: ComboboxTriggerProps;\n state: ComboboxTriggerState<TOption>;\n field: ComboboxFieldState;\n placeholder: string;\n isClearable: boolean;\n isClean: boolean;\n size: ComboboxSize;\n /** Maximum number of rows the selected tags may wrap into in multi select. `null` is unlimited. */\n maxRows?: number | null;\n components: ComboboxComponents<TOption>;\n /** Floating UI reference props, so clicking anywhere in the control opens the panel. */\n referenceProps: React.HTMLAttributes<HTMLDivElement>;\n referenceRef: React.Ref<HTMLDivElement>;\n};\n\ntype ComboboxEmptyStateProps = {\n children?: React.ReactNode;\n};\n\ntype ComboboxInputProps = {\n ref?: React.Ref<HTMLInputElement>;\n ariaLabel: string;\n value: string;\n onValueChange: (searchValue: string) => void;\n placeholder?: string;\n /** Id of the listbox the input controls, when the listbox is rendered. */\n listboxId?: string;\n /** Id of the virtually focused option, when one is active. */\n activeOptionId?: string;\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n};\n\ntype ComboboxListBoxProps = {\n ariaLabel: string;\n children?: React.ReactNode;\n isMulti?: boolean;\n id?: string;\n /** Ids of the pinned action rows the listbox owns without containing. */\n ownsIds?: string;\n};\n\ntype ComboboxGroupProps = {\n children?: React.ReactNode;\n label: string;\n};\n\ntype ComboboxOptionProps = {\n children?: React.ReactNode;\n /** Left out on rows that cannot be selected, which drops `aria-selected`. */\n isSelected?: boolean;\n isDisabled?: boolean;\n isFocused?: boolean;\n /** Whether the option is the row that creates a new option from the search value. */\n isCreate?: boolean;\n /** Whether the option is an action row, which acts instead of selecting. */\n isAction?: boolean;\n id?: string;\n onClick?: () => void;\n /** Called when the pointer moves over the option, so hover can drive virtual focus. */\n onHover?: () => void;\n /**\n * One-based position in the full list. Only set while the listbox is\n * virtualized, where the DOM no longer holds every option.\n */\n posInSet?: number;\n /** Total options in the full list. Only set while the listbox is virtualized. */\n setSize?: number;\n};\n\ntype ComboboxOptionContentProps = {\n label: string;\n /**\n * Replaces the label text. Rendered in place of the label typography rather\n * than inside it, so it can be any element rather than inline text.\n */\n customLabel?: React.ReactNode;\n description?: string;\n leadingVisual?: React.ReactNode;\n isDisabled?: boolean;\n isSelected?: boolean;\n isMulti?: boolean;\n};\n\nexport type {\n ComboboxProps,\n ComboboxAction,\n ComboboxComponents,\n ComboboxControlProps,\n ComboboxFieldState,\n ComboboxMultiValueProps,\n ComboboxOptionLabelProps,\n ComboboxSingleValueProps,\n ComboboxTriggerProps,\n ComboboxTriggerState,\n ComboboxPanelProps,\n ComboboxEmptyStateProps,\n ComboboxFilterOption,\n ComboboxInputProps,\n ComboboxListBoxProps,\n ComboboxGroupProps,\n ComboboxOptionProps,\n ComboboxOptionContentProps,\n ComboboxOption,\n ComboboxOptionGroup,\n ComboboxSize,\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: try to fix as some point\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\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 Boundary, shift, size } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useCallback, useRef, useState } from 'react';\nimport ReactDatePicker, {\n type ReactDatePickerCustomHeaderProps,\n} from 'react-datepicker';\n\nimport type { CommonProps, HtmlAttributes } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { Divider } from '../divider';\nimport { ArrowLeftIconOutline } from '../icons/generated/heroIcons/ArrowLeftIconOutline';\nimport { ArrowRightIconOutline } from '../icons/generated/heroIcons/ArrowRightIconOutline';\nimport { CalendarDaysIconOutline } from '../icons/generated/heroIcons/CalendarDaysIconOutline';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { TextInput } from '../text-input';\nimport { NeedleTime, TimePicker, type TimePickerProps } from '../time-picker';\nimport { TimeZonePicker } from '../timezone-picker';\nimport { Typography } from '../typography';\nimport { daysInMonth, getYearsPeriodString } from './utils';\n\ntype DatePickerTextInputWrapperProps = React.ComponentProps<'input'> & {\n textInputProps?: React.ComponentProps<typeof TextInput>;\n isDisabled?: boolean;\n isClearable?: boolean;\n value?: string;\n ariaLabel?: string;\n};\n\n// This wrapper is needed due to react-datepicker injecting html attributes\n// into the custom input component on root level, since we use htmlAttributes\n// we need to help spread them there instead of the root level\nconst DatePickerTextInputWrapper = ({\n textInputProps,\n isDisabled,\n isClearable,\n value,\n placeholder,\n ...restProps\n}: DatePickerTextInputWrapperProps) => {\n // deconstruct textInputProps to avoid bugs with react-datepicker injecting props\n const {\n placeholder: textInputPlaceholder,\n htmlAttributes: textInputHtmlAttributes,\n onChange: textInputOnChange,\n ref,\n ...restTextInputProps\n } = textInputProps ?? {};\n const { onChange: injectedOnChange, ...restInjectedProps } = restProps;\n\n const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n injectedOnChange?.(event);\n textInputOnChange?.(event);\n };\n\n return (\n <TextInput\n ref={ref}\n trailingElement={<CalendarDaysIconOutline />}\n value={value}\n placeholder={placeholder ?? textInputPlaceholder}\n isDisabled={isDisabled}\n isClearable={isClearable}\n onChange={handleChange}\n // react-datepicker injects html attributes into the custom input\n htmlAttributes={{\n ...textInputHtmlAttributes,\n ...restInjectedProps,\n }}\n {...restTextInputProps}\n />\n );\n};\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype PickerType = 'day' | 'month' | 'year';\n\n// Define a more flexible type for onChange\ntype DatePickerChangeHandler = (\n date: Date | null | [Date | null, Date | null] | Date[],\n event?: React.SyntheticEvent | undefined,\n) => void;\n\n/**\n * @remarks\n * The `reactDatePickerProps` prop is forwarded to the underlying `react-datepicker` component. See the [react-datepicker documentation](https://reactdatepicker.com/) for more information.\n *\n * @remarks\n * Where `TextInputProps` is defined in the `TextInput` component and `TimePickerProps` is defined in the `TimePicker` component.\n */\ninterface DatePickerProps {\n /** Props for the embedded `TextInput` component. */\n // TODO v5: this forwards TextInput's props, so its showRequiredOrOptionalLabel\n // to hasRequiredIndicator rename lands here too and needs the same codemod.\n textInputProps?: React.ComponentProps<typeof TextInput>;\n /** Whether the date picker is disabled. */\n isDisabled?: boolean;\n /**\n * Whether to show the clear button.\n * @default false\n */\n isClearable?: boolean;\n /** Props for the embedded `TimePicker` component. */\n timePickerProps?: TimePickerProps;\n /** Props for the embedded `TimeZonePicker` component. */\n timeZonePickerProps?: React.ComponentProps<typeof TimeZonePicker>;\n /** Props forwarded to underlying `react-datepicker` component. */\n reactDatePickerProps: React.ComponentProps<typeof ReactDatePicker>;\n /**\n * WARNING: these attributes do not apply to the underlying input element currently. This will be fixed in a future version.\n */\n htmlAttributes?: HtmlAttributes<'div'>;\n}\n\nexport const DatePicker = ({\n reactDatePickerProps,\n textInputProps,\n timePickerProps,\n timeZonePickerProps,\n isDisabled,\n isClearable = false,\n ref,\n className,\n style,\n htmlAttributes,\n ...restProps\n}: CommonProps<'div', DatePickerProps>) => {\n const classes = classNames(`ndl-datepicker`, className, {});\n const datetimeRef = useRef<ReactDatePicker>(null);\n const shouldRestoreFocusAfterEscapeRef = useRef(false);\n const [picker, setPicker] = useState<PickerType>('day');\n const [preSelectedDate, setPreSelectedDate] = useState<Date | null>(\n (reactDatePickerProps.selected as Date | null) ||\n (reactDatePickerProps.startDate as Date | null),\n );\n const [selectedTimeZone, setSelectedTimeZone] = useState<string | undefined>(\n timeZonePickerProps?.value,\n );\n\n const isInsideDialog = useIsInsideDialog();\n\n // Inside a Dialog the popper is fixed and not portaled. A transformed\n // ancestor (e.g. Popover) can make Floating UI under-measure available\n // space, so use the viewport as the boundary instead.\n const floatingBoundary: Boundary = isInsideDialog ? [] : 'clippingAncestors';\n\n const headerAction = useCallback(\n (action: PickerType) => {\n setPicker(picker === action ? 'day' : action);\n },\n [picker],\n );\n\n const CustomHeader = useCallback(\n (props: ReactDatePickerCustomHeaderProps) => {\n const {\n decreaseMonth,\n increaseMonth,\n increaseYear,\n decreaseYear,\n nextMonthButtonDisabled,\n nextYearButtonDisabled,\n prevMonthButtonDisabled,\n prevYearButtonDisabled,\n } = props;\n\n const prevCallback = picker === 'year' ? decreaseYear : decreaseMonth;\n const nextCallback = picker === 'year' ? increaseYear : increaseMonth;\n const prevDisabled =\n picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;\n const nextDisabled =\n picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;\n\n return (\n <div className=\"ndl-datepicker-header\">\n <div className=\"ndl-datepicker-selects\">\n {picker !== 'year' && (\n <button\n type=\"button\"\n aria-label={`${picker === 'month' ? 'Close' : 'Open'} month picker`}\n aria-pressed={picker === 'month'}\n onClick={() => headerAction('month')}\n >\n <div className=\"n-flex n-items-center n-gap-token-4\">\n <Typography variant=\"subheading-small\">\n {format(props.date, 'MMM')}\n </Typography>\n <ChevronDownIconOutline\n className={classNames('ndl-datepicker-chevron', {\n 'n-rotate-180': picker === 'month',\n })}\n aria-label=\"Chevron icon\"\n />\n </div>\n </button>\n )}\n {picker !== 'month' && (\n <button\n type=\"button\"\n aria-label={`${picker === 'year' ? 'Close' : 'Open'} year picker`}\n onClick={() => headerAction('year')}\n >\n <div className=\"n-flex n-items-center n-gap-token-4\">\n <Typography variant=\"subheading-small\">\n {picker === 'year'\n ? getYearsPeriodString(\n props.date,\n reactDatePickerProps?.yearItemNumber,\n )\n : format(props.date, 'yyyy')}\n </Typography>\n <ChevronDownIconOutline\n className={classNames('ndl-datepicker-chevron', {\n 'n-rotate-180': picker === 'year',\n })}\n aria-label=\"Chevron icon\"\n />\n </div>\n </button>\n )}\n </div>\n {picker !== 'month' && (\n <div className=\"n-flex n-justify-center n-gap-token-16\">\n <CleanIconButton\n description={\n picker === 'year' ? 'Previous period' : 'Previous month'\n }\n onClick={prevCallback}\n isDisabled={prevDisabled}\n className=\"n-text-neutral-text-weak\"\n size=\"small\"\n >\n <ArrowLeftIconOutline />\n </CleanIconButton>\n <CleanIconButton\n description={picker === 'year' ? 'Next period' : 'Next month'}\n onClick={nextCallback}\n isDisabled={nextDisabled}\n className=\"n-text-neutral-text-weak\"\n size=\"small\"\n >\n <ArrowRightIconOutline />\n </CleanIconButton>\n </div>\n )}\n </div>\n );\n },\n [picker, headerAction, reactDatePickerProps?.yearItemNumber],\n );\n\n const handleTimeChange = (newTime: NeedleTime) => {\n if (\n reactDatePickerProps.selectsRange ||\n reactDatePickerProps.selectsMultiple\n ) {\n // this is consistent with the behavior of react-datepicker\n return;\n }\n\n if (!preSelectedDate) {\n return;\n }\n\n const newDate = new Date(preSelectedDate);\n newDate.setHours(newTime.hour, newTime.minute, 0, 0);\n setPreSelectedDate(newDate);\n\n if (reactDatePickerProps.onChange) {\n // For single date selection\n reactDatePickerProps.onChange(newDate, undefined);\n }\n };\n\n const handleTimeZoneChange = (timezone: string) => {\n setSelectedTimeZone(timezone);\n if (timeZonePickerProps?.onChange) {\n timeZonePickerProps.onChange(timezone);\n }\n };\n\n /**\n * Intercept onChange so we can work with\n * Month and Year pickers\n */\n const interceptedChange: DatePickerChangeHandler = useCallback(\n (\n date: Date | null | [Date | null, Date | null] | Date[],\n event?: React.SyntheticEvent,\n ) => {\n if (picker !== 'day') {\n // setTimeout to prevent picker change before the handleMonthChange logic\n setTimeout(() => {\n setPicker('day');\n });\n } else if (picker === 'day') {\n if (date instanceof Date) {\n setPreSelectedDate(date);\n } else if (\n Array.isArray(date) &&\n date.length > 0 &&\n date[0] instanceof Date\n ) {\n setPreSelectedDate(date[0]);\n } else if (date === null) {\n setPreSelectedDate(null);\n }\n\n if (reactDatePickerProps.onChange && date !== null) {\n (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n date,\n event,\n );\n }\n }\n },\n [picker, reactDatePickerProps],\n );\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n // react-datepicker prevents Escape when it closes the calendar, but\n // otherwise lets the event bubble and dismiss ancestor overlays.\n if (event.key === 'Escape' && event.defaultPrevented) {\n shouldRestoreFocusAfterEscapeRef.current = true;\n event.stopPropagation();\n }\n htmlAttributes?.onKeyDown?.(event);\n };\n\n /** These intercepts are needed for webkit to ensure that focus is restored to the input when the calendar is closed. */\n const interceptedOnBlur = useCallback(\n (event: React.FocusEvent<HTMLElement>) => {\n reactDatePickerProps.onBlur?.(event);\n\n if (\n !shouldRestoreFocusAfterEscapeRef.current ||\n event.relatedTarget !== null\n ) {\n return;\n }\n\n const input = event.currentTarget;\n queueMicrotask(() => {\n if (\n shouldRestoreFocusAfterEscapeRef.current &&\n input.isConnected &&\n document.activeElement === document.body\n ) {\n datetimeRef.current?.sendFocusBackToInput();\n }\n shouldRestoreFocusAfterEscapeRef.current = false;\n });\n },\n [reactDatePickerProps],\n );\n\n const interceptedOnFocus = useCallback(\n (event: React.FocusEvent<HTMLElement>) => {\n reactDatePickerProps.onFocus?.(event);\n\n if (!shouldRestoreFocusAfterEscapeRef.current) {\n return;\n }\n\n // react-datepicker schedules both focus and blur while closing. If blur\n // ran first, focus is now stable and the Escape marker can be cleared.\n requestAnimationFrame(() => {\n shouldRestoreFocusAfterEscapeRef.current = false;\n });\n },\n [reactDatePickerProps],\n );\n\n /**\n * Intercept onCalendarClose so we can\n * switch to \"day\" picker if we close on \"month\" or \"year\"\n * view\n */\n const interceptedOnCalendarClose = useCallback(() => {\n if (picker !== 'day') {\n setPicker('day');\n }\n reactDatePickerProps?.onCalendarClose?.();\n }, [picker, reactDatePickerProps]);\n\n const handleMonthChange = useCallback(\n (date: Date) => {\n if (picker === 'month') {\n const selectedDay = preSelectedDate?.getDate() ?? 1;\n const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());\n date.setDate(Math.min(selectedDay, daysInNewMonth));\n reactDatePickerProps?.onMonthChange?.(date);\n } else if (picker === 'year') {\n const selectedDay = preSelectedDate?.getDate() ?? 1;\n const selectedMonth = preSelectedDate?.getMonth() ?? 0;\n const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());\n date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));\n reactDatePickerProps?.onMonthChange?.(date);\n }\n setPreSelectedDate(date);\n },\n [picker, preSelectedDate, reactDatePickerProps],\n );\n\n /**\n * Intercept onChangeRaw to handle clearing the input\n * When the user clears the text input, set the date to null\n */\n const interceptedOnChangeRaw = useCallback(\n (\n event?:\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement, MouseEvent>,\n ) => {\n const target = event?.target as HTMLInputElement | undefined;\n if (target?.value === '') {\n setPreSelectedDate(null);\n if (reactDatePickerProps.onChange) {\n (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n null,\n event,\n );\n }\n }\n reactDatePickerProps?.onChangeRaw?.(event);\n },\n [reactDatePickerProps],\n );\n\n const datePickerProps = {\n ...reactDatePickerProps,\n onBlur: interceptedOnBlur,\n onCalendarClose: interceptedOnCalendarClose,\n onChange: interceptedChange,\n onChangeRaw: interceptedOnChangeRaw,\n onFocus: interceptedOnFocus,\n onMonthChange: handleMonthChange,\n };\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the key handlers only stop Escape from propagating, they add no interaction\n <div\n className={classes}\n ref={ref}\n style={style}\n {...restProps}\n {...htmlAttributes}\n onKeyDown={handleKeyDown}\n >\n {/** TODO v5: Remove the div wrapper, type the component as an input, and apply all root props to the TextInput */}\n <ReactDatePicker\n ref={datetimeRef}\n customInput={\n <DatePickerTextInputWrapper\n isDisabled={isDisabled}\n isClearable={isClearable}\n textInputProps={textInputProps}\n />\n }\n customTimeInput={\n <span className=\"ndl-time-picker-wrapper\">\n <Divider />\n <TimePicker\n isFluid\n value={\n preSelectedDate\n ? new NeedleTime(\n preSelectedDate.getHours(),\n preSelectedDate.getMinutes(),\n )\n : undefined\n }\n onChange={handleTimeChange}\n {...timePickerProps}\n floatingStrategy=\"absolute\"\n isPortaled={false}\n />\n {timeZonePickerProps && (\n <TimeZonePicker\n isFluid\n value={selectedTimeZone}\n onChange={handleTimeZoneChange}\n referenceDate={preSelectedDate || undefined}\n {...timeZonePickerProps}\n floatingStrategy=\"absolute\"\n isPortaled={false}\n />\n )}\n </span>\n }\n disabled={isDisabled}\n showPopperArrow={false}\n showMonthYearPicker={picker === 'month'}\n showYearPicker={picker === 'year'}\n shouldCloseOnSelect={\n picker === 'day' && !(reactDatePickerProps.showTimeInput ?? false)\n }\n dayClassName={() => 'ndl-datepicker-day'}\n renderCustomHeader={CustomHeader}\n {...datePickerProps}\n isClearable={isClearable}\n popperClassName={classNames(\n 'ndl-datepicker-popper',\n reactDatePickerProps.popperClassName,\n )}\n popperModifiers={[\n shift({ boundary: floatingBoundary, padding: 8 }),\n size({\n apply({ availableHeight, availableWidth, elements }) {\n elements.floating.style.setProperty(\n '--ndl-datepicker-available-height',\n `${availableHeight}px`,\n );\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n });\n },\n boundary: floatingBoundary,\n padding: 8,\n }),\n ...(reactDatePickerProps.popperModifiers ?? []),\n ]}\n popperProps={{\n strategy: isInsideDialog ? 'fixed' : 'absolute',\n ...reactDatePickerProps.popperProps,\n }}\n />\n </div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: try to fix as some point\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\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 Boundary, shift, size } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useCallback, useRef, useState } from 'react';\nimport ReactDatePicker, {\n type ReactDatePickerCustomHeaderProps,\n} from 'react-datepicker';\n\nimport type { CommonProps, HtmlAttributes } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { Divider } from '../divider';\nimport { ArrowLeftIconOutline } from '../icons/generated/heroIcons/ArrowLeftIconOutline';\nimport { ArrowRightIconOutline } from '../icons/generated/heroIcons/ArrowRightIconOutline';\nimport { CalendarDaysIconOutline } from '../icons/generated/heroIcons/CalendarDaysIconOutline';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { TextInput } from '../text-input';\nimport { NeedleTime, TimePicker, type TimePickerProps } from '../time-picker';\nimport { TimeZonePicker } from '../timezone-picker';\nimport { Typography } from '../typography';\nimport { daysInMonth, getYearsPeriodString } from './utils';\n\ntype DatePickerTextInputWrapperProps = React.ComponentProps<'input'> & {\n textInputProps?: React.ComponentProps<typeof TextInput>;\n isDisabled?: boolean;\n isClearable?: boolean;\n value?: string;\n ariaLabel?: string;\n};\n\n// This wrapper is needed due to react-datepicker injecting html attributes\n// into the custom input component on root level, since we use htmlAttributes\n// we need to help spread them there instead of the root level\nconst DatePickerTextInputWrapper = ({\n textInputProps,\n isDisabled,\n isClearable,\n value,\n placeholder,\n ...restProps\n}: DatePickerTextInputWrapperProps) => {\n // deconstruct textInputProps to avoid bugs with react-datepicker injecting props\n const {\n placeholder: textInputPlaceholder,\n htmlAttributes: textInputHtmlAttributes,\n onChange: textInputOnChange,\n ref,\n ...restTextInputProps\n } = textInputProps ?? {};\n const { onChange: injectedOnChange, ...restInjectedProps } = restProps;\n\n const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n injectedOnChange?.(event);\n textInputOnChange?.(event);\n };\n\n return (\n <TextInput\n ref={ref}\n trailingElement={<CalendarDaysIconOutline />}\n value={value}\n placeholder={placeholder ?? textInputPlaceholder}\n isDisabled={isDisabled}\n isClearable={isClearable}\n onChange={handleChange}\n // react-datepicker injects html attributes into the custom input\n htmlAttributes={{\n ...textInputHtmlAttributes,\n ...restInjectedProps,\n }}\n {...restTextInputProps}\n />\n );\n};\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype PickerType = 'day' | 'month' | 'year';\n\n// Define a more flexible type for onChange\ntype DatePickerChangeHandler = (\n date: Date | null | [Date | null, Date | null] | Date[],\n event?: React.SyntheticEvent | undefined,\n) => void;\n\n/**\n * @remarks\n * The `reactDatePickerProps` prop is forwarded to the underlying `react-datepicker` component. See the [react-datepicker documentation](https://reactdatepicker.com/) for more information.\n *\n * @remarks\n * Where `TextInputProps` is defined in the `TextInput` component and `TimePickerProps` is defined in the `TimePicker` component.\n */\ninterface DatePickerProps {\n /** Props for the embedded `TextInput` component. */\n // TODO v5: this forwards TextInput's props, so whatever happens to its\n // inconsistently named ones lands here too and needs the same codemod.\n textInputProps?: React.ComponentProps<typeof TextInput>;\n /** Whether the date picker is disabled. */\n isDisabled?: boolean;\n /**\n * Whether to show the clear button.\n * @default false\n */\n isClearable?: boolean;\n /** Props for the embedded `TimePicker` component. */\n timePickerProps?: TimePickerProps;\n /** Props for the embedded `TimeZonePicker` component. */\n timeZonePickerProps?: React.ComponentProps<typeof TimeZonePicker>;\n /** Props forwarded to underlying `react-datepicker` component. */\n reactDatePickerProps: React.ComponentProps<typeof ReactDatePicker>;\n /**\n * WARNING: these attributes do not apply to the underlying input element currently. This will be fixed in a future version.\n */\n htmlAttributes?: HtmlAttributes<'div'>;\n}\n\nexport const DatePicker = ({\n reactDatePickerProps,\n textInputProps,\n timePickerProps,\n timeZonePickerProps,\n isDisabled,\n isClearable = false,\n ref,\n className,\n style,\n htmlAttributes,\n ...restProps\n}: CommonProps<'div', DatePickerProps>) => {\n const classes = classNames(`ndl-datepicker`, className, {});\n const datetimeRef = useRef<ReactDatePicker>(null);\n const shouldRestoreFocusAfterEscapeRef = useRef(false);\n const [picker, setPicker] = useState<PickerType>('day');\n const [preSelectedDate, setPreSelectedDate] = useState<Date | null>(\n (reactDatePickerProps.selected as Date | null) ||\n (reactDatePickerProps.startDate as Date | null),\n );\n const [selectedTimeZone, setSelectedTimeZone] = useState<string | undefined>(\n timeZonePickerProps?.value,\n );\n\n const isInsideDialog = useIsInsideDialog();\n\n // Inside a Dialog the popper is fixed and not portaled. A transformed\n // ancestor (e.g. Popover) can make Floating UI under-measure available\n // space, so use the viewport as the boundary instead.\n const floatingBoundary: Boundary = isInsideDialog ? [] : 'clippingAncestors';\n\n const headerAction = useCallback(\n (action: PickerType) => {\n setPicker(picker === action ? 'day' : action);\n },\n [picker],\n );\n\n const CustomHeader = useCallback(\n (props: ReactDatePickerCustomHeaderProps) => {\n const {\n decreaseMonth,\n increaseMonth,\n increaseYear,\n decreaseYear,\n nextMonthButtonDisabled,\n nextYearButtonDisabled,\n prevMonthButtonDisabled,\n prevYearButtonDisabled,\n } = props;\n\n const prevCallback = picker === 'year' ? decreaseYear : decreaseMonth;\n const nextCallback = picker === 'year' ? increaseYear : increaseMonth;\n const prevDisabled =\n picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;\n const nextDisabled =\n picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;\n\n return (\n <div className=\"ndl-datepicker-header\">\n <div className=\"ndl-datepicker-selects\">\n {picker !== 'year' && (\n <button\n type=\"button\"\n aria-label={`${picker === 'month' ? 'Close' : 'Open'} month picker`}\n aria-pressed={picker === 'month'}\n onClick={() => headerAction('month')}\n >\n <div className=\"n-flex n-items-center n-gap-token-4\">\n <Typography variant=\"subheading-small\">\n {format(props.date, 'MMM')}\n </Typography>\n <ChevronDownIconOutline\n className={classNames('ndl-datepicker-chevron', {\n 'n-rotate-180': picker === 'month',\n })}\n aria-label=\"Chevron icon\"\n />\n </div>\n </button>\n )}\n {picker !== 'month' && (\n <button\n type=\"button\"\n aria-label={`${picker === 'year' ? 'Close' : 'Open'} year picker`}\n onClick={() => headerAction('year')}\n >\n <div className=\"n-flex n-items-center n-gap-token-4\">\n <Typography variant=\"subheading-small\">\n {picker === 'year'\n ? getYearsPeriodString(\n props.date,\n reactDatePickerProps?.yearItemNumber,\n )\n : format(props.date, 'yyyy')}\n </Typography>\n <ChevronDownIconOutline\n className={classNames('ndl-datepicker-chevron', {\n 'n-rotate-180': picker === 'year',\n })}\n aria-label=\"Chevron icon\"\n />\n </div>\n </button>\n )}\n </div>\n {picker !== 'month' && (\n <div className=\"n-flex n-justify-center n-gap-token-16\">\n <CleanIconButton\n description={\n picker === 'year' ? 'Previous period' : 'Previous month'\n }\n onClick={prevCallback}\n isDisabled={prevDisabled}\n className=\"n-text-neutral-text-weak\"\n size=\"small\"\n >\n <ArrowLeftIconOutline />\n </CleanIconButton>\n <CleanIconButton\n description={picker === 'year' ? 'Next period' : 'Next month'}\n onClick={nextCallback}\n isDisabled={nextDisabled}\n className=\"n-text-neutral-text-weak\"\n size=\"small\"\n >\n <ArrowRightIconOutline />\n </CleanIconButton>\n </div>\n )}\n </div>\n );\n },\n [picker, headerAction, reactDatePickerProps?.yearItemNumber],\n );\n\n const handleTimeChange = (newTime: NeedleTime) => {\n if (\n reactDatePickerProps.selectsRange ||\n reactDatePickerProps.selectsMultiple\n ) {\n // this is consistent with the behavior of react-datepicker\n return;\n }\n\n if (!preSelectedDate) {\n return;\n }\n\n const newDate = new Date(preSelectedDate);\n newDate.setHours(newTime.hour, newTime.minute, 0, 0);\n setPreSelectedDate(newDate);\n\n if (reactDatePickerProps.onChange) {\n // For single date selection\n reactDatePickerProps.onChange(newDate, undefined);\n }\n };\n\n const handleTimeZoneChange = (timezone: string) => {\n setSelectedTimeZone(timezone);\n if (timeZonePickerProps?.onChange) {\n timeZonePickerProps.onChange(timezone);\n }\n };\n\n /**\n * Intercept onChange so we can work with\n * Month and Year pickers\n */\n const interceptedChange: DatePickerChangeHandler = useCallback(\n (\n date: Date | null | [Date | null, Date | null] | Date[],\n event?: React.SyntheticEvent,\n ) => {\n if (picker !== 'day') {\n // setTimeout to prevent picker change before the handleMonthChange logic\n setTimeout(() => {\n setPicker('day');\n });\n } else if (picker === 'day') {\n if (date instanceof Date) {\n setPreSelectedDate(date);\n } else if (\n Array.isArray(date) &&\n date.length > 0 &&\n date[0] instanceof Date\n ) {\n setPreSelectedDate(date[0]);\n } else if (date === null) {\n setPreSelectedDate(null);\n }\n\n if (reactDatePickerProps.onChange && date !== null) {\n (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n date,\n event,\n );\n }\n }\n },\n [picker, reactDatePickerProps],\n );\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n // react-datepicker prevents Escape when it closes the calendar, but\n // otherwise lets the event bubble and dismiss ancestor overlays.\n if (event.key === 'Escape' && event.defaultPrevented) {\n shouldRestoreFocusAfterEscapeRef.current = true;\n event.stopPropagation();\n }\n htmlAttributes?.onKeyDown?.(event);\n };\n\n /** These intercepts are needed for webkit to ensure that focus is restored to the input when the calendar is closed. */\n const interceptedOnBlur = useCallback(\n (event: React.FocusEvent<HTMLElement>) => {\n reactDatePickerProps.onBlur?.(event);\n\n if (\n !shouldRestoreFocusAfterEscapeRef.current ||\n event.relatedTarget !== null\n ) {\n return;\n }\n\n const input = event.currentTarget;\n queueMicrotask(() => {\n if (\n shouldRestoreFocusAfterEscapeRef.current &&\n input.isConnected &&\n document.activeElement === document.body\n ) {\n datetimeRef.current?.sendFocusBackToInput();\n }\n shouldRestoreFocusAfterEscapeRef.current = false;\n });\n },\n [reactDatePickerProps],\n );\n\n const interceptedOnFocus = useCallback(\n (event: React.FocusEvent<HTMLElement>) => {\n reactDatePickerProps.onFocus?.(event);\n\n if (!shouldRestoreFocusAfterEscapeRef.current) {\n return;\n }\n\n // react-datepicker schedules both focus and blur while closing. If blur\n // ran first, focus is now stable and the Escape marker can be cleared.\n requestAnimationFrame(() => {\n shouldRestoreFocusAfterEscapeRef.current = false;\n });\n },\n [reactDatePickerProps],\n );\n\n /**\n * Intercept onCalendarClose so we can\n * switch to \"day\" picker if we close on \"month\" or \"year\"\n * view\n */\n const interceptedOnCalendarClose = useCallback(() => {\n if (picker !== 'day') {\n setPicker('day');\n }\n reactDatePickerProps?.onCalendarClose?.();\n }, [picker, reactDatePickerProps]);\n\n const handleMonthChange = useCallback(\n (date: Date) => {\n if (picker === 'month') {\n const selectedDay = preSelectedDate?.getDate() ?? 1;\n const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());\n date.setDate(Math.min(selectedDay, daysInNewMonth));\n reactDatePickerProps?.onMonthChange?.(date);\n } else if (picker === 'year') {\n const selectedDay = preSelectedDate?.getDate() ?? 1;\n const selectedMonth = preSelectedDate?.getMonth() ?? 0;\n const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());\n date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));\n reactDatePickerProps?.onMonthChange?.(date);\n }\n setPreSelectedDate(date);\n },\n [picker, preSelectedDate, reactDatePickerProps],\n );\n\n /**\n * Intercept onChangeRaw to handle clearing the input\n * When the user clears the text input, set the date to null\n */\n const interceptedOnChangeRaw = useCallback(\n (\n event?:\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement, MouseEvent>,\n ) => {\n const target = event?.target as HTMLInputElement | undefined;\n if (target?.value === '') {\n setPreSelectedDate(null);\n if (reactDatePickerProps.onChange) {\n (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n null,\n event,\n );\n }\n }\n reactDatePickerProps?.onChangeRaw?.(event);\n },\n [reactDatePickerProps],\n );\n\n const datePickerProps = {\n ...reactDatePickerProps,\n onBlur: interceptedOnBlur,\n onCalendarClose: interceptedOnCalendarClose,\n onChange: interceptedChange,\n onChangeRaw: interceptedOnChangeRaw,\n onFocus: interceptedOnFocus,\n onMonthChange: handleMonthChange,\n };\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the key handlers only stop Escape from propagating, they add no interaction\n <div\n className={classes}\n ref={ref}\n style={style}\n {...restProps}\n {...htmlAttributes}\n onKeyDown={handleKeyDown}\n >\n {/** TODO v5: Remove the div wrapper, type the component as an input, and apply all root props to the TextInput */}\n <ReactDatePicker\n ref={datetimeRef}\n customInput={\n <DatePickerTextInputWrapper\n isDisabled={isDisabled}\n isClearable={isClearable}\n textInputProps={textInputProps}\n />\n }\n customTimeInput={\n <span className=\"ndl-time-picker-wrapper\">\n <Divider />\n <TimePicker\n isFluid\n value={\n preSelectedDate\n ? new NeedleTime(\n preSelectedDate.getHours(),\n preSelectedDate.getMinutes(),\n )\n : undefined\n }\n onChange={handleTimeChange}\n {...timePickerProps}\n floatingStrategy=\"absolute\"\n isPortaled={false}\n />\n {timeZonePickerProps && (\n <TimeZonePicker\n isFluid\n value={selectedTimeZone}\n onChange={handleTimeZoneChange}\n referenceDate={preSelectedDate || undefined}\n {...timeZonePickerProps}\n floatingStrategy=\"absolute\"\n isPortaled={false}\n />\n )}\n </span>\n }\n disabled={isDisabled}\n showPopperArrow={false}\n showMonthYearPicker={picker === 'month'}\n showYearPicker={picker === 'year'}\n shouldCloseOnSelect={\n picker === 'day' && !(reactDatePickerProps.showTimeInput ?? false)\n }\n dayClassName={() => 'ndl-datepicker-day'}\n renderCustomHeader={CustomHeader}\n {...datePickerProps}\n isClearable={isClearable}\n popperClassName={classNames(\n 'ndl-datepicker-popper',\n reactDatePickerProps.popperClassName,\n )}\n popperModifiers={[\n shift({ boundary: floatingBoundary, padding: 8 }),\n size({\n apply({ availableHeight, availableWidth, elements }) {\n elements.floating.style.setProperty(\n '--ndl-datepicker-available-height',\n `${availableHeight}px`,\n );\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n });\n },\n boundary: floatingBoundary,\n padding: 8,\n }),\n ...(reactDatePickerProps.popperModifiers ?? []),\n ]}\n popperProps={{\n strategy: isInsideDialog ? 'fixed' : 'absolute',\n ...reactDatePickerProps.popperProps,\n }}\n />\n </div>\n );\n};\n"]}
|
package/lib/cjs/radio/Radio.js
CHANGED
|
@@ -37,9 +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 form_control_1 = require("../_common/form-control");
|
|
41
41
|
const use_semi_controlled_input_1 = require("../_common/use-semi-controlled-input");
|
|
42
|
-
const utils_1 = require("../_common/utils");
|
|
43
42
|
const Radio = (_a) => {
|
|
44
43
|
var _b;
|
|
45
44
|
var { ariaLabel, isDisabled = false, isDefaultChecked, label, isFluid = false, isChecked, hasLeadingLabel, onChange, className, style, onClick, value, htmlAttributes, ref } = _a, restProps = __rest(_a, ["ariaLabel", "isDisabled", "isDefaultChecked", "label", "isFluid", "isChecked", "hasLeadingLabel", "onChange", "className", "style", "onClick", "value", "htmlAttributes", "ref"]);
|
|
@@ -49,29 +48,20 @@ const Radio = (_a) => {
|
|
|
49
48
|
onChange,
|
|
50
49
|
state: (_b = isChecked !== null && isChecked !== void 0 ? isChecked : isDefaultChecked) !== null && _b !== void 0 ? _b : false,
|
|
51
50
|
});
|
|
52
|
-
const labelWrappingClasses = (0, classnames_1.default)('ndl-radio-label', {
|
|
53
|
-
'ndl-disabled': isDisabled,
|
|
54
|
-
'ndl-fluid': isFluid,
|
|
55
|
-
});
|
|
56
51
|
const radioClasses = (0, classnames_1.default)('ndl-radio', className, {
|
|
57
52
|
'ndl-disabled': isDisabled,
|
|
58
53
|
});
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
(0,
|
|
70
|
-
if (Boolean(label) === false && Boolean(ariaLabel) === false) {
|
|
71
|
-
(0, utils_1.needleWarningMessage)('Radio needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI');
|
|
72
|
-
}
|
|
73
|
-
}, [ariaLabel, label]);
|
|
74
|
-
return ((0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [hasLeadingLabel === true && labelContent, (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, type: "radio", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: radioClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
|
|
54
|
+
const { labelContent, fieldClassName } = (0, form_control_1.useInlineFieldLabel)({
|
|
55
|
+
ariaLabel,
|
|
56
|
+
componentName: 'Radio',
|
|
57
|
+
isDisabled,
|
|
58
|
+
isFluid,
|
|
59
|
+
// TODO v5: decide whether all selection controls should truncate; today
|
|
60
|
+
// only Radio does.
|
|
61
|
+
isTruncated: true,
|
|
62
|
+
label,
|
|
63
|
+
});
|
|
64
|
+
return ((0, jsx_runtime_1.jsxs)("label", { className: fieldClassName, children: [hasLeadingLabel === true && labelContent, (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, type: "radio", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: radioClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
|
|
75
65
|
};
|
|
76
66
|
exports.Radio = Radio;
|
|
77
67
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/radio/Radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/radio/Radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAEpC,0DAA8D;AAE9D,oFAA8E;AAqCvE,MAAM,KAAK,GAAG,CAAC,EAgBa,EAAE,EAAE;;QAhBjB,EACpB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,gBAAgB,EAChB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,SAAS,EACT,eAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,cAAc,EACd,GAAG,OAE8B,EAD9B,SAAS,cAfQ,kLAgBrB,CADa;IAEZ,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,IAAA,kDAAsB,EAAC;QAChE,SAAS,EAAE,OAAO;QAClB,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,YAAY,GAAG,IAAA,oBAAU,EAAC,WAAW,EAAE,SAAS,EAAE;QACtD,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,EAAC;QAC3D,SAAS;QACT,aAAa,EAAE,OAAO;QACtB,UAAU;QACV,OAAO;QACP,wEAAwE;QACxE,mBAAmB;QACnB,WAAW,EAAE,IAAI;QACjB,KAAK;KACN,CAAC,CAAC;IAEH,OAAO,CACL,mCAAO,SAAS,EAAE,cAAc,aAC7B,eAAe,KAAK,IAAI,IAAI,YAAY,EACzC,gDACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,gBACA,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,YAAY,IACnB,SAAS,EACT,cAAc,EAClB,EACD,OAAO,CAAC,eAAe,CAAC,KAAK,KAAK,IAAI,YAAY,IAC7C,CACT,CAAC;AACJ,CAAC,CAAC;AA3DW,QAAA,KAAK,SA2DhB","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';\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 RadioProps = {\n /** Whether the radio is checked */\n isChecked?: boolean;\n /** Selects the radio by default in uncontrolled mode */\n isDefaultChecked?: boolean;\n /** Whether the radio is disabled */\n isDisabled?: boolean;\n /** Whether the radio & label should take the full available width of its container */\n isFluid?: boolean;\n /** Whether the label should be displayed before the radio */\n hasLeadingLabel?: boolean;\n /** The callback function triggered when the radio value changes */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /** The value of the radio */\n value?: HtmlAttributes<'input'>['value'];\n /** The callback function triggered when the radio is clicked */\n onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n | {\n /** The aria label of the radio. Required if the label is not a string. */\n ariaLabel: string;\n // TODO v5: inconsistent naming. Naming the radio takes a union of `label`\n // and `ariaLabel`, so the accessible name comes from a different prop\n // 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 radio. 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 Radio = ({\n ariaLabel,\n isDisabled = false,\n isDefaultChecked,\n label,\n isFluid = false,\n isChecked,\n hasLeadingLabel,\n onChange,\n className,\n style,\n onClick,\n value,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'input', RadioProps>) => {\n const [isCheckedState, internalOnChange] = useSemiControlledInput({\n inputType: 'radio',\n isControlled: isChecked !== undefined,\n onChange,\n state: isChecked ?? isDefaultChecked ?? false,\n });\n\n const radioClasses = classNames('ndl-radio', className, {\n 'ndl-disabled': isDisabled,\n });\n\n const { labelContent, fieldClassName } = useInlineFieldLabel({\n ariaLabel,\n componentName: 'Radio',\n isDisabled,\n isFluid,\n // TODO v5: decide whether all selection controls should truncate; today\n // only Radio does.\n isTruncated: true,\n label,\n });\n\n return (\n <label className={fieldClassName}>\n {hasLeadingLabel === true && labelContent}\n <input\n ref={ref}\n type=\"radio\"\n aria-label={ariaLabel}\n disabled={isDisabled}\n checked={isCheckedState}\n onClick={onClick}\n onChange={internalOnChange}\n value={value}\n style={style}\n className={radioClasses}\n {...restProps}\n {...htmlAttributes}\n />\n {Boolean(hasLeadingLabel) === false && labelContent}\n </label>\n );\n};\n"]}
|
package/lib/cjs/select/Select.js
CHANGED
|
@@ -43,10 +43,9 @@ const react_select_1 = __importDefault(require("react-select"));
|
|
|
43
43
|
const async_1 = __importDefault(require("react-select/async"));
|
|
44
44
|
/** Different types of select components */
|
|
45
45
|
const creatable_1 = __importDefault(require("react-select/creatable"));
|
|
46
|
+
const form_control_1 = require("../_common/form-control");
|
|
46
47
|
const utils_1 = require("../_common/utils");
|
|
47
48
|
const dialog_context_1 = require("../dialog/dialog-context");
|
|
48
|
-
const ExclamationCircleIconSolid_1 = require("../icons/generated/heroIcons/ExclamationCircleIconSolid");
|
|
49
|
-
const typography_1 = require("../typography");
|
|
50
49
|
const Overrides_1 = require("./Overrides");
|
|
51
50
|
/**
|
|
52
51
|
*
|
|
@@ -102,8 +101,18 @@ const Select = (_a) => {
|
|
|
102
101
|
const isInsideDialog = (0, dialog_context_1.useIsInsideDialog)();
|
|
103
102
|
const menuPosition = isInsideDialog ? 'fixed' : 'absolute';
|
|
104
103
|
const identifier = (0, react_1.useId)();
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
// The shared form field resolves the ids and which message is displayed -
|
|
105
|
+
// an error always replaces the help text. Select has no required support;
|
|
106
|
+
// it is deprecated in favor of Combobox, which has isRequired and
|
|
107
|
+
// hasRequiredIndicator.
|
|
108
|
+
const { field } = (0, form_control_1.useFormField)({
|
|
109
|
+
controlId: identifier,
|
|
110
|
+
errorText,
|
|
111
|
+
helpText,
|
|
112
|
+
label,
|
|
113
|
+
});
|
|
114
|
+
const helpTextId = field.helpTextId;
|
|
115
|
+
const errorTextId = field.errorTextId;
|
|
107
116
|
const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
|
|
108
117
|
const handleMenuOpen = () => {
|
|
109
118
|
setIsMenuOpen(true);
|
|
@@ -164,7 +173,7 @@ const Select = (_a) => {
|
|
|
164
173
|
'ndl-multi': selectProps.isMulti,
|
|
165
174
|
'ndl-small': size === 'small',
|
|
166
175
|
});
|
|
167
|
-
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [Boolean(label) && (0, jsx_runtime_1.jsx)(
|
|
176
|
+
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [Boolean(label) && (0, jsx_runtime_1.jsx)(form_control_1.FormFieldLabel, { field: field, size: size }), SelectElement, (0, jsx_runtime_1.jsx)(form_control_1.FormFieldMessage, { field: field, size: size })] })));
|
|
168
177
|
};
|
|
169
178
|
exports.Select = Select;
|
|
170
179
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,0CAAyC;AACzC,4DAAoC;AAEpC,iCAA4D;AAC5D,gEAA2D;AAC3D,+DAA6C;AAC7C,2CAA2C;AAC3C,uEAA+C;AAG/C,4CAAwD;AACxD,6DAA6D;AAC7D,wGAAqG;AACrG,8CAA2C;AAC3C,2CAcqB;AAGrB;;;;;;GAMG;AAEH,MAAM,kBAAkB,GAAG,CAKzB,KAAgE,EAChE,EAAE,CACF,CAAC;IACC,cAAc,EAAE,IAAA,iCAAqB,EAAC,KAAK,CAAC;IAC5C,OAAO,EAAE,IAAA,yBAAa,EAAC,KAAK,CAAC;IAC7B,iBAAiB,EAAE,IAAA,qCAAyB,EAAC,KAAK,CAAC;IACnD,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAA,qCAAyB,EAAC,KAAK,CAAC;IACrD,KAAK,EAAE,IAAA,uBAAW,EAAC,KAAK,CAAC;IACzB,IAAI,EAAE,IAAA,sBAAU,EAAC,KAAK,CAAC;IACvB,QAAQ,EAAE,IAAA,0BAAc,EAAC,KAAK,CAAC;IAC/B,UAAU,EAAE,IAAA,4BAAgB,EAAC,KAAK,CAAC;IACnC,UAAU,EAAE,IAAA,4BAAgB,EAAC,KAAK,CAAC;IACnC,MAAM,EAAE,IAAA,wBAAY,EAAC,KAAK,CAAC;IAC3B,WAAW,EAAE,IAAA,6BAAiB,EAAC,KAAK,CAAC;IACrC,WAAW,EAAE,IAAA,6BAAiB,EAAC,KAAK,CAAC;IACrC,cAAc,EAAE,IAAA,gCAAoB,EAAC,KAAK,CAAC;CAC5C,CAI6B,CAAC;AAEjC,MAAM,YAAY,GAAG,GAIjB,EAAE;IACJ,OAAO;QACL,cAAc,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QACnB,iBAAiB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QAC7B,mBAAmB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/B,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QACjB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YACnB,MAAM,EAAE,QAAQ,CAAC,MAAM;YACvB,GAAG,EAAE,QAAQ,CAAC,GAAG;SAClB,CAAC;QACF,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YACvB,SAAS,EAAE,QAAQ,CAAC,SAAS;YAC7B,SAAS,EAAE,QAAQ,CAAC,SAAS;SAC9B,CAAC;QACF,UAAU,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,iCACrB,QAAQ,KACX,MAAM,EAAE,aAAM,CAAC,MAAM,CAAC,OAAO,IAC7B;QACF,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QAClB,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QACvB,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;QACvB,cAAc,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,iCACzB,QAAQ,KACX,OAAO,EAAE,GAAG,IACZ;KACqE,CAAC;AAC5E,CAAC,CAAC;AAEF;;GAEG;AACI,MAAM,MAAM,GAAG,CAKpB,EAiBuE,EAAE,EAAE;;QAjB3E,EACA,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,IAAI,EACd,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,KAAK,EACf,UAAU,EACV,cAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,OAEoE,EADpE,SAAS,cAhBZ,uKAiBD,CADa;IAEZ,MAAM,cAAc,GAAG,IAAA,kCAAiB,GAAE,CAAC;IAC3C,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAA,aAAK,GAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,IAAA,aAAK,GAAE,CAAC;IAC3B,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,IAAI,WAAW,CAAC,UAAU,EAAE,CAAC;YAC3B,WAAW,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,WAAW,CAAC,WAAW,EAAE,CAAC;YAC5B,WAAW,CAAC,WAAW,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,uEAAuE;IACvE,MAAM,aAAa,GAAG,CAAC,KAA0C,EAAE,EAAE;QACnE,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,UAAU,CAAC;YACtC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,UAAU,CAAC,EACrC,CAAC;YACD,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;QAED,IAAI,WAAW,CAAC,SAAS,EAAE,CAAC;YAC1B,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAEjD,MAAM,kBAAkB,GAAG,IAAA,eAAO,EAChC,GAAG,EAAE,CACH,kBAAkB,CAAiC;QACjD,SAAS;QACT,WAAW;QACX,QAAQ;QACR,UAAU;QACV,OAAO;QACP,IAAI;KACL,CAAC,EACJ,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,CAAC,CAC9D,CAAC;IAEF,MAAM,cAAc,GAAG,IAAA,eAAO,EAC5B,GAAG,EAAE,CAAC,YAAY,EAAkC,EACpD,EAAE,CACH,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,SAAS,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YACnD,IAAA,4BAAoB,EAClB,4IAA4I,CAC7I,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,IAAI,aAAgC,CAAC;IACrC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,aAAa,GAAG,CACd,uBAAC,eAAW,kBACV,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,WAAW,CAAC,UAAU,EACzD,aAAa,EAAC,MAAM,gBACR,SAAS,kBACP,OAAO,CAAC,SAAS,CAAC,IAC5B,WAAW,IACf,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,MAAA,WAAW,CAAC,YAAY,mCAAI,YAAY,EACtD,mBAAmB,EAAE,KAAK,EAC1B,iBAAiB,EAAE,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,KAAK,EACzD,MAAM,kCAAO,cAAc,GAAK,WAAW,CAAC,MAAM,GAClD,UAAU,kCAAO,kBAAkB,GAAK,WAAW,CAAC,UAAU,KAC9D,CACH,CAAC;YACF,MAAM;QACR,CAAC;QACD,KAAK,WAAW;YACd,aAAa,GAAG,CACd,uBAAC,mBAAS,kBACR,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,WAAW,CAAC,UAAU,EACzD,aAAa,EAAC,MAAM,IAChB,WAAW,kBACH,SAAS,kBACP,OAAO,CAAC,SAAS,CAAC,EAChC,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,MAAA,WAAW,CAAC,YAAY,mCAAI,YAAY,EACtD,mBAAmB,EAAE,KAAK,EAC1B,iBAAiB,EAAE,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,KAAK,EACzD,MAAM,kCAAO,cAAc,GAAK,WAAW,CAAC,MAAM,GAClD,UAAU,kCAAO,kBAAkB,GAAK,WAAW,CAAC,UAAU,KAC9D,CACH,CAAC;YACF,MAAM;QACR;YACE,aAAa,GAAG,CACd,uBAAC,sBAAW,kBACV,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,WAAW,CAAC,UAAU,EACzD,aAAa,EAAC,MAAM,IAChB,WAAW,kBACH,SAAS,kBACP,OAAO,CAAC,SAAS,CAAC,EAChC,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,MAAA,WAAW,CAAC,YAAY,mCAAI,YAAY,EACtD,mBAAmB,EAAE,KAAK,EAC1B,iBAAiB,EAAE,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,KAAK,EACzD,MAAM,kCAAO,cAAc,GAAK,WAAW,CAAC,MAAM,GAClD,UAAU,kCAAO,kBAAkB,GAAK,WAAW,CAAC,UAAU,KAC9D,CACH,CAAC;IACN,CAAC;IAED,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,YAAY,EAAE,SAAS,EAAE;QAClD,eAAe,EAAE,IAAI,KAAK,WAAW;QACrC,cAAc,EAAE,WAAW,CAAC,UAAU;QACtC,WAAW,EAAE,OAAO;QACpB,eAAe,EAAE,OAAO,CAAC,SAAS,CAAC;QACnC,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,WAAW,CAAC,OAAO;QAChC,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,wBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,eAEjB,OAAO,CAAC,KAAK,CAAC,IAAI,kCAAO,OAAO,EAAE,UAAU,YAAG,KAAK,GAAS,EAC7D,aAAa,EACb,OAAO,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,KAAK,IAAI,CACpD,uBAAC,uBAAU,IACT,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EACxD,SAAS,EAAC,cAAc,EACxB,cAAc,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,YAEjC,QAAQ,GACE,CACd,EACA,OAAO,CAAC,SAAS,CAAC,IAAI,CACrB,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uDAA0B,IACzB,SAAS,EAAC,gBAAgB,EAC1B,cAAc,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAC9C,EACF,iCAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,6BAA6B,YAC3D,SAAS,GACL,IACH,CACP,KACS,CACb,CAAC;AACJ,CAAC,CAAC;AApMW,QAAA,MAAM,UAoMjB","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"]}
|
|
@@ -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/cjs/switch/Switch.js
CHANGED
|
@@ -39,8 +39,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
39
39
|
const react_1 = require("@floating-ui/react");
|
|
40
40
|
const classnames_1 = __importDefault(require("classnames"));
|
|
41
41
|
const react_2 = require("react");
|
|
42
|
+
const form_control_1 = require("../_common/form-control");
|
|
42
43
|
const use_semi_controlled_input_1 = require("../_common/use-semi-controlled-input");
|
|
43
|
-
const utils_1 = require("../_common/utils");
|
|
44
44
|
const Switch = (_a) => {
|
|
45
45
|
var _b;
|
|
46
46
|
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"]);
|
|
@@ -52,10 +52,6 @@ const Switch = (_a) => {
|
|
|
52
52
|
onChange,
|
|
53
53
|
state: (_b = isChecked !== null && isChecked !== void 0 ? isChecked : isDefaultChecked) !== null && _b !== void 0 ? _b : false,
|
|
54
54
|
});
|
|
55
|
-
const labelWrappingClasses = (0, classnames_1.default)('ndl-switch-label', {
|
|
56
|
-
'ndl-disabled': isDisabled,
|
|
57
|
-
'ndl-fluid': isFluid,
|
|
58
|
-
});
|
|
59
55
|
const switchClasses = (0, classnames_1.default)('ndl-switch', className, {
|
|
60
56
|
'ndl-disabled': isDisabled,
|
|
61
57
|
});
|
|
@@ -64,22 +60,14 @@ const Switch = (_a) => {
|
|
|
64
60
|
internalRef.current.indeterminate = isIndeterminate;
|
|
65
61
|
}
|
|
66
62
|
}, [isIndeterminate]);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
return label;
|
|
76
|
-
}, [label]);
|
|
77
|
-
(0, react_2.useEffect)(() => {
|
|
78
|
-
if (Boolean(label) === false && Boolean(ariaLabel) === false) {
|
|
79
|
-
(0, utils_1.needleWarningMessage)('Switch needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI');
|
|
80
|
-
}
|
|
81
|
-
}, [ariaLabel, label]);
|
|
82
|
-
return ((0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [hasLeadingLabel === true && labelContent, (0, jsx_runtime_1.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] }));
|
|
63
|
+
const { labelContent, fieldClassName } = (0, form_control_1.useInlineFieldLabel)({
|
|
64
|
+
ariaLabel,
|
|
65
|
+
componentName: 'Switch',
|
|
66
|
+
isDisabled,
|
|
67
|
+
isFluid,
|
|
68
|
+
label,
|
|
69
|
+
});
|
|
70
|
+
return ((0, jsx_runtime_1.jsxs)("label", { className: fieldClassName, children: [hasLeadingLabel === true && labelContent, (0, jsx_runtime_1.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] }));
|
|
83
71
|
};
|
|
84
72
|
exports.Switch = Switch;
|
|
85
73
|
//# sourceMappingURL=Switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,8CAAkD;AAClD,4DAAoC;AACpC,
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,8CAAkD;AAClD,4DAAoC;AACpC,iCAA0C;AAE1C,0DAA8D;AAE9D,oFAA8E;AAuCvE,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,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,IAAA,oBAAY,EAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,IAAA,kDAAsB,EAAC;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,IAAA,oBAAU,EAAC,YAAY,EAAE,SAAS,EAAE;QACxD,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,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,IAAA,kCAAmB,EAAC;QAC3D,SAAS;QACT,aAAa,EAAE,QAAQ;QACvB,UAAU;QACV,OAAO;QACP,KAAK;KACN,CAAC,CAAC;IAEH,OAAO,CACL,mCAAO,SAAS,EAAE,cAAc,aAC7B,eAAe,KAAK,IAAI,IAAI,YAAY,EACzC,gDACE,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;AAnEW,QAAA,MAAM,UAmEjB","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"]}
|