@neo4j-ndl/react 4.25.0 → 4.25.1

package/lib/cjs/select/Select.js

@@ -97,18 +97,21 @@ const customStyles = () => {
  */
 const Select = (_a) => {
     var _b, _c, _d;
-    var { as, label, helpText, errorText, isFluid = true, size = 'medium', type = 'select', ariaLabel, selectProps = {}, isClean = false, isDisabled, htmlAttributes, className, style, ref } = _a, restProps = __rest(_a, ["as", "label", "helpText", "errorText", "isFluid", "size", "type", "ariaLabel", "selectProps", "isClean", "isDisabled", "htmlAttributes", "className", "style", "ref"]);
+    var { as, label, helpText, errorText, isFluid = true, size = 'medium', type = 'select', ariaLabel, selectProps = {}, isClean = false, isDisabled, isRequired = false, hasRequiredIndicator = false, htmlAttributes, className, style, ref } = _a, restProps = __rest(_a, ["as", "label", "helpText", "errorText", "isFluid", "size", "type", "ariaLabel", "selectProps", "isClean", "isDisabled", "isRequired", "hasRequiredIndicator", "htmlAttributes", "className", "style", "ref"]);
     const isInsideDialog = (0, dialog_context_1.useIsInsideDialog)();
     const menuPosition = isInsideDialog ? 'fixed' : 'absolute';
     const identifier = (0, react_1.useId)();
+    // `selectProps.required` predates `isRequired`, so either one keeps the
+    // indicator and the native validation in sync.
+    const isFieldRequired = isRequired || Boolean(selectProps.required);
     // The shared form field resolves the ids and which message is displayed -
-    // an error always replaces the help text. Select has no required support;
-    // it is deprecated in favor of Combobox, which has isRequired and
-    // hasRequiredIndicator.
+    // an error always replaces the help text.
     const { field } = (0, form_control_1.useFormField)({
         controlId: identifier,
         errorText,
+        hasRequiredIndicator,
         helpText,
+        isRequired: isFieldRequired,
         label,
     });
     const helpTextId = field.helpTextId;
@@ -154,14 +157,14 @@ const Select = (_a) => {
     let SelectElement;
     switch (type) {
         case 'async': {
-            SelectElement = ((0, jsx_runtime_1.jsx)(async_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto", "aria-label": ariaLabel, "aria-invalid": Boolean(errorText) }, selectProps, { onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_b = selectProps.menuPosition) !== null && _b !== void 0 ? _b : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = ((0, jsx_runtime_1.jsx)(async_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto", "aria-label": ariaLabel, "aria-invalid": Boolean(errorText) }, selectProps, { required: isFieldRequired, onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_b = selectProps.menuPosition) !== null && _b !== void 0 ? _b : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
             break;
         }
         case 'creatable':
-            SelectElement = ((0, jsx_runtime_1.jsx)(creatable_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_c = selectProps.menuPosition) !== null && _c !== void 0 ? _c : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = ((0, jsx_runtime_1.jsx)(creatable_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), required: isFieldRequired, onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_c = selectProps.menuPosition) !== null && _c !== void 0 ? _c : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
             break;
         default:
-            SelectElement = ((0, jsx_runtime_1.jsx)(react_select_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_d = selectProps.menuPosition) !== null && _d !== void 0 ? _d : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = ((0, jsx_runtime_1.jsx)(react_select_1.default, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), required: isFieldRequired, onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_d = selectProps.menuPosition) !== null && _d !== void 0 ? _d : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
     }
     const classes = (0, classnames_1.default)('ndl-select', className, {
         'ndl-creatable': type === 'creatable',

package/lib/cjs/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport ReactSelect, { type GroupBase } from 'react-select';\nimport AsyncSelect from 'react-select/async';\n/** Different types of select components */\nimport Creatable from 'react-select/creatable';\n\nimport {\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"]}
+{"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  isRequired = false,\n  hasRequiredIndicator = false,\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  // `selectProps.required` predates `isRequired`, so either one keeps the\n  // indicator and the native validation in sync.\n  const isFieldRequired = isRequired || Boolean(selectProps.required);\n  // The shared form field resolves the ids and which message is displayed -\n  // an error always replaces the help text.\n  const { field } = useFormField({\n    controlId: identifier,\n    errorText,\n    hasRequiredIndicator,\n    helpText,\n    isRequired: isFieldRequired,\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          required={isFieldRequired}\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          required={isFieldRequired}\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          required={isFieldRequired}\n          onKeyDown={handleKeyDown}\n          onMenuOpen={handleMenuOpen}\n          onMenuClose={handleMenuClose}\n          menuPosition={selectProps.menuPosition ?? menuPosition}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n          styles={{ ...StyleOverrides, ...selectProps.styles }}\n          components={{ ...ComponentOverrides, ...selectProps.components }}\n        />\n      );\n  }\n\n  const classes = classNames('ndl-select', className, {\n    'ndl-creatable': type === 'creatable',\n    'ndl-disabled': selectProps.isDisabled,\n    'ndl-fluid': isFluid,\n    'ndl-has-error': Boolean(errorText),\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-multi': selectProps.isMulti,\n    'ndl-small': size === 'small',\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {Boolean(label) && <FormFieldLabel field={field} size={size} />}\n      {SelectElement}\n      <FormFieldMessage field={field} size={size} />\n    </Component>\n  );\n};\n"]}

package/lib/cjs/select/stories/index.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectEmptySource = exports.SelectControlledSource = exports.SelectAsyncSource = exports.SelectMenuPositioningsSource = exports.SelectSizesSource = exports.SelectCleanSource = exports.SelectDisabledSource = exports.SelectInsideDialogSource = exports.SelectCustomLabelSource = exports.SelectMultiSource = exports.SelectCreatableSource = exports.SelectErrorStateSource = exports.SelectDefaultSource = exports.SelectEmpty = exports.SelectControlled = exports.SelectAsync = exports.SelectMenuPositionings = exports.SelectSizes = exports.SelectClean = exports.SelectDisabled = exports.SelectInsideDialog = exports.SelectCustomLabel = exports.SelectMulti = exports.SelectCreatable = exports.SelectErrorState = exports.SelectDefault = void 0;
+exports.SelectRequiredSource = exports.SelectEmptySource = exports.SelectControlledSource = exports.SelectAsyncSource = exports.SelectMenuPositioningsSource = exports.SelectSizesSource = exports.SelectCleanSource = exports.SelectDisabledSource = exports.SelectInsideDialogSource = exports.SelectCustomLabelSource = exports.SelectMultiSource = exports.SelectCreatableSource = exports.SelectErrorStateSource = exports.SelectDefaultSource = exports.SelectRequired = exports.SelectEmpty = exports.SelectControlled = exports.SelectAsync = exports.SelectMenuPositionings = exports.SelectSizes = exports.SelectClean = exports.SelectDisabled = exports.SelectInsideDialog = exports.SelectCustomLabel = exports.SelectMulti = exports.SelectCreatable = exports.SelectErrorState = exports.SelectDefault = void 0;
 var select_default_story_1 = require("./select-default.story");
 Object.defineProperty(exports, "SelectDefault", { enumerable: true, get: function () { return __importDefault(select_default_story_1).default; } });
 var select_error_state_story_1 = require("./select-error-state.story");
@@ -50,6 +50,8 @@ var select_controlled_story_1 = require("./select-controlled.story");
 Object.defineProperty(exports, "SelectControlled", { enumerable: true, get: function () { return __importDefault(select_controlled_story_1).default; } });
 var select_empty_story_1 = require("./select-empty.story");
 Object.defineProperty(exports, "SelectEmpty", { enumerable: true, get: function () { return __importDefault(select_empty_story_1).default; } });
+var select_required_story_1 = require("./select-required.story");
+Object.defineProperty(exports, "SelectRequired", { enumerable: true, get: function () { return __importDefault(select_required_story_1).default; } });
 const export_stories_utils_1 = require("../../_common/export-stories-utils");
 const select_async_story_raw_1 = __importDefault(require("./select-async.story?raw"));
 const select_clean_story_raw_1 = __importDefault(require("./select-clean.story?raw"));
@@ -63,6 +65,7 @@ const select_error_state_story_raw_1 = __importDefault(require("./select-error-s
 const select_inside_dialog_story_raw_1 = __importDefault(require("./select-inside-dialog.story?raw"));
 const select_menu_positionings_story_raw_1 = __importDefault(require("./select-menu-positionings.story?raw"));
 const select_multi_story_raw_1 = __importDefault(require("./select-multi.story?raw"));
+const select_required_story_raw_1 = __importDefault(require("./select-required.story?raw"));
 const select_sizes_story_raw_1 = __importDefault(require("./select-sizes.story?raw"));
 exports.SelectDefaultSource = (0, export_stories_utils_1.removeLicenseHeader)(select_default_story_raw_1.default);
 exports.SelectErrorStateSource = (0, export_stories_utils_1.removeLicenseHeader)(select_error_state_story_raw_1.default);
@@ -77,4 +80,5 @@ exports.SelectMenuPositioningsSource = (0, export_stories_utils_1.removeLicenseH
 exports.SelectAsyncSource = (0, export_stories_utils_1.removeLicenseHeader)(select_async_story_raw_1.default);
 exports.SelectControlledSource = (0, export_stories_utils_1.removeLicenseHeader)(select_controlled_story_raw_1.default);
 exports.SelectEmptySource = (0, export_stories_utils_1.removeLicenseHeader)(select_empty_story_raw_1.default);
+exports.SelectRequiredSource = (0, export_stories_utils_1.removeLicenseHeader)(select_required_story_raw_1.default);
 //# sourceMappingURL=index.js.map

package/lib/cjs/select/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/select/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,+DAAkE;AAAzD,sIAAA,OAAO,OAAiB;AACjC,uEAAyE;AAAhE,6IAAA,OAAO,OAAoB;AACpC,mEAAsE;AAA7D,0IAAA,OAAO,OAAmB;AACnC,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,yEAA2E;AAAlE,+IAAA,OAAO,OAAqB;AACrC,2EAA6E;AAApE,iJAAA,OAAO,OAAsB;AACtC,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,mFAAqF;AAA5E,yJAAA,OAAO,OAA0B;AAC1C,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,qEAAwE;AAA/D,4IAAA,OAAO,OAAoB;AACpC,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAE/B,6EAAyE;AACzE,sFAA4D;AAC5D,sFAA4D;AAC5D,gGAAsE;AACtE,8FAAoE;AACpE,oGAAyE;AACzE,0FAAgE;AAChE,4FAAkE;AAClE,sFAA4D;AAC5D,kGAAuE;AACvE,sGAA2E;AAC3E,8GAAmF;AACnF,sFAA4D;AAC5D,sFAA4D;AAE/C,QAAA,mBAAmB,GAAG,IAAA,0CAAmB,EAAC,kCAAsB,CAAC,CAAC;AAClE,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,sCAAyB,CAC1B,CAAC;AACW,QAAA,qBAAqB,GAAG,IAAA,0CAAmB,EACtD,oCAAwB,CACzB,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,uCAA0B,CAC3B,CAAC;AACW,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,wCAA2B,CAC5B,CAAC;AACW,QAAA,oBAAoB,GAAG,IAAA,0CAAmB,EACrD,mCAAuB,CACxB,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,4BAA4B,GAAG,IAAA,0CAAmB,EAC7D,4CAA+B,CAChC,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,qCAAyB,CAC1B,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as SelectDefault } from './select-default.story';\nexport { default as SelectErrorState } from './select-error-state.story';\nexport { default as SelectCreatable } from './select-creatable.story';\nexport { default as SelectMulti } from './select-multi.story';\nexport { default as SelectCustomLabel } from './select-custom-label.story';\nexport { default as SelectInsideDialog } from './select-inside-dialog.story';\nexport { default as SelectDisabled } from './select-disabled.story';\nexport { default as SelectClean } from './select-clean.story';\nexport { default as SelectSizes } from './select-sizes.story';\nexport { default as SelectMenuPositionings } from './select-menu-positionings.story';\nexport { default as SelectAsync } from './select-async.story';\nexport { default as SelectControlled } from './select-controlled.story';\nexport { default as SelectEmpty } from './select-empty.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport SelectAsyncSourceRaw from './select-async.story?raw';\nimport SelectCleanSourceRaw from './select-clean.story?raw';\nimport SelectControlledSourceRaw from './select-controlled.story?raw';\nimport SelectCreatableSourceRaw from './select-creatable.story?raw';\nimport SelectCustomLabelSourceRaw from './select-custom-label.story?raw';\nimport SelectDefaultSourceRaw from './select-default.story?raw';\nimport SelectDisabledSourceRaw from './select-disabled.story?raw';\nimport SelectEmptySourceRaw from './select-empty.story?raw';\nimport SelectErrorStateSourceRaw from './select-error-state.story?raw';\nimport SelectInsideDialogSourceRaw from './select-inside-dialog.story?raw';\nimport SelectMenuPositioningsSourceRaw from './select-menu-positionings.story?raw';\nimport SelectMultiSourceRaw from './select-multi.story?raw';\nimport SelectSizesSourceRaw from './select-sizes.story?raw';\n\nexport const SelectDefaultSource = removeLicenseHeader(SelectDefaultSourceRaw);\nexport const SelectErrorStateSource = removeLicenseHeader(\n  SelectErrorStateSourceRaw,\n);\nexport const SelectCreatableSource = removeLicenseHeader(\n  SelectCreatableSourceRaw,\n);\nexport const SelectMultiSource = removeLicenseHeader(SelectMultiSourceRaw);\nexport const SelectCustomLabelSource = removeLicenseHeader(\n  SelectCustomLabelSourceRaw,\n);\nexport const SelectInsideDialogSource = removeLicenseHeader(\n  SelectInsideDialogSourceRaw,\n);\nexport const SelectDisabledSource = removeLicenseHeader(\n  SelectDisabledSourceRaw,\n);\nexport const SelectCleanSource = removeLicenseHeader(SelectCleanSourceRaw);\nexport const SelectSizesSource = removeLicenseHeader(SelectSizesSourceRaw);\nexport const SelectMenuPositioningsSource = removeLicenseHeader(\n  SelectMenuPositioningsSourceRaw,\n);\nexport const SelectAsyncSource = removeLicenseHeader(SelectAsyncSourceRaw);\nexport const SelectControlledSource = removeLicenseHeader(\n  SelectControlledSourceRaw,\n);\nexport const SelectEmptySource = removeLicenseHeader(SelectEmptySourceRaw);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/select/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,+DAAkE;AAAzD,sIAAA,OAAO,OAAiB;AACjC,uEAAyE;AAAhE,6IAAA,OAAO,OAAoB;AACpC,mEAAsE;AAA7D,0IAAA,OAAO,OAAmB;AACnC,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,yEAA2E;AAAlE,+IAAA,OAAO,OAAqB;AACrC,2EAA6E;AAApE,iJAAA,OAAO,OAAsB;AACtC,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,mFAAqF;AAA5E,yJAAA,OAAO,OAA0B;AAC1C,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,qEAAwE;AAA/D,4IAAA,OAAO,OAAoB;AACpC,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAElC,6EAAyE;AACzE,sFAA4D;AAC5D,sFAA4D;AAC5D,gGAAsE;AACtE,8FAAoE;AACpE,oGAAyE;AACzE,0FAAgE;AAChE,4FAAkE;AAClE,sFAA4D;AAC5D,kGAAuE;AACvE,sGAA2E;AAC3E,8GAAmF;AACnF,sFAA4D;AAC5D,4FAAkE;AAClE,sFAA4D;AAE/C,QAAA,mBAAmB,GAAG,IAAA,0CAAmB,EAAC,kCAAsB,CAAC,CAAC;AAClE,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,sCAAyB,CAC1B,CAAC;AACW,QAAA,qBAAqB,GAAG,IAAA,0CAAmB,EACtD,oCAAwB,CACzB,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,uCAA0B,CAC3B,CAAC;AACW,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,wCAA2B,CAC5B,CAAC;AACW,QAAA,oBAAoB,GAAG,IAAA,0CAAmB,EACrD,mCAAuB,CACxB,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,4BAA4B,GAAG,IAAA,0CAAmB,EAC7D,4CAA+B,CAChC,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,qCAAyB,CAC1B,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,oBAAoB,GAAG,IAAA,0CAAmB,EACrD,mCAAuB,CACxB,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as SelectDefault } from './select-default.story';\nexport { default as SelectErrorState } from './select-error-state.story';\nexport { default as SelectCreatable } from './select-creatable.story';\nexport { default as SelectMulti } from './select-multi.story';\nexport { default as SelectCustomLabel } from './select-custom-label.story';\nexport { default as SelectInsideDialog } from './select-inside-dialog.story';\nexport { default as SelectDisabled } from './select-disabled.story';\nexport { default as SelectClean } from './select-clean.story';\nexport { default as SelectSizes } from './select-sizes.story';\nexport { default as SelectMenuPositionings } from './select-menu-positionings.story';\nexport { default as SelectAsync } from './select-async.story';\nexport { default as SelectControlled } from './select-controlled.story';\nexport { default as SelectEmpty } from './select-empty.story';\nexport { default as SelectRequired } from './select-required.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport SelectAsyncSourceRaw from './select-async.story?raw';\nimport SelectCleanSourceRaw from './select-clean.story?raw';\nimport SelectControlledSourceRaw from './select-controlled.story?raw';\nimport SelectCreatableSourceRaw from './select-creatable.story?raw';\nimport SelectCustomLabelSourceRaw from './select-custom-label.story?raw';\nimport SelectDefaultSourceRaw from './select-default.story?raw';\nimport SelectDisabledSourceRaw from './select-disabled.story?raw';\nimport SelectEmptySourceRaw from './select-empty.story?raw';\nimport SelectErrorStateSourceRaw from './select-error-state.story?raw';\nimport SelectInsideDialogSourceRaw from './select-inside-dialog.story?raw';\nimport SelectMenuPositioningsSourceRaw from './select-menu-positionings.story?raw';\nimport SelectMultiSourceRaw from './select-multi.story?raw';\nimport SelectRequiredSourceRaw from './select-required.story?raw';\nimport SelectSizesSourceRaw from './select-sizes.story?raw';\n\nexport const SelectDefaultSource = removeLicenseHeader(SelectDefaultSourceRaw);\nexport const SelectErrorStateSource = removeLicenseHeader(\n  SelectErrorStateSourceRaw,\n);\nexport const SelectCreatableSource = removeLicenseHeader(\n  SelectCreatableSourceRaw,\n);\nexport const SelectMultiSource = removeLicenseHeader(SelectMultiSourceRaw);\nexport const SelectCustomLabelSource = removeLicenseHeader(\n  SelectCustomLabelSourceRaw,\n);\nexport const SelectInsideDialogSource = removeLicenseHeader(\n  SelectInsideDialogSourceRaw,\n);\nexport const SelectDisabledSource = removeLicenseHeader(\n  SelectDisabledSourceRaw,\n);\nexport const SelectCleanSource = removeLicenseHeader(SelectCleanSourceRaw);\nexport const SelectSizesSource = removeLicenseHeader(SelectSizesSourceRaw);\nexport const SelectMenuPositioningsSource = removeLicenseHeader(\n  SelectMenuPositioningsSourceRaw,\n);\nexport const SelectAsyncSource = removeLicenseHeader(SelectAsyncSourceRaw);\nexport const SelectControlledSource = removeLicenseHeader(\n  SelectControlledSourceRaw,\n);\nexport const SelectEmptySource = removeLicenseHeader(SelectEmptySourceRaw);\nexport const SelectRequiredSource = removeLicenseHeader(\n  SelectRequiredSourceRaw,\n);\n"]}

package/lib/cjs/select/stories/select-required.story.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*!
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const EXAMPLE_OPTIONS = [
+    { label: 'Neo4j', value: 'neo4j' },
+    { label: 'Needle 🪡', value: 'needle' },
+    { label: 'Graph Databases', value: 'graph-database' },
+];
+const Component = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Select, { label: "Required", type: "select", isRequired: true, hasRequiredIndicator: true, selectProps: {
+                    options: EXAMPLE_OPTIONS,
+                } }), (0, jsx_runtime_1.jsx)(react_1.Select, { label: "Optional", type: "select", hasRequiredIndicator: true, selectProps: {
+                    options: EXAMPLE_OPTIONS,
+                } })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=select-required.story.js.map

package/lib/cjs/select/stories/select-required.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-required.story.js","sourceRoot":"","sources":["../../../../src/select/stories/select-required.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,eAAe,GAAG;IACtB,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;IACvC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,gBAAgB,EAAE;CACtD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,cAAM,IACL,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,QAAQ,EACb,UAAU,QACV,oBAAoB,QACpB,WAAW,EAAE;oBACX,OAAO,EAAE,eAAe;iBACzB,GACD,EACF,uBAAC,cAAM,IACL,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,QAAQ,EACb,oBAAoB,QACpB,WAAW,EAAE;oBACX,OAAO,EAAE,eAAe;iBACzB,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Select } from '@neo4j-ndl/react';\n\nconst EXAMPLE_OPTIONS = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Needle 🪡', value: 'needle' },\n  { label: 'Graph Databases', value: 'graph-database' },\n];\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <Select\n        label=\"Required\"\n        type=\"select\"\n        isRequired\n        hasRequiredIndicator\n        selectProps={{\n          options: EXAMPLE_OPTIONS,\n        }}\n      />\n      <Select\n        label=\"Optional\"\n        type=\"select\"\n        hasRequiredIndicator\n        selectProps={{\n          options: EXAMPLE_OPTIONS,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/select/types.js.map

@@ -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      // 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"]}
+{"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  /**\n   * Whether a value is required. Sets `aria-required` and enables native form validation.\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Whether Required or Optional is shown at the end of the label row, based on the `isRequired` prop\n   * @default false\n   */\n  hasRequiredIndicator?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Additional style */\n  style?: React.CSSProperties;\n} & (\n  | {\n      // Deprecated, so this keeps its aria label union even though naming a\n      // control is spelled differently on every form component. Combobox, its\n      // replacement, requires the label and clips it with\n      // `hasVisuallyHiddenLabel` instead.\n      /** Label of the select component. If not provided, please provide an ariaLabel. */\n      label?: undefined;\n      /** Aria label of the select component */\n      ariaLabel: string;\n    }\n  | {\n      label: React.ReactNode;\n      ariaLabel?: string;\n    }\n);\n\ntype ReactSelectProps<\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n  /** Type of the select component */\n  type: 'select';\n  /** Props of the select component, based of React Select props */\n  selectProps: Props<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\ntype ReactSelectAsyncProps<\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n  /** Type of the select component */\n  type: 'async';\n  /** Props of the select component, based of React Select props */\n  selectProps: AsyncProps<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\ntype ReactSelectCreatableProps<\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = {\n  /** Type of the select component */\n  type: 'creatable';\n  /** Props of the select component, based of React Select props */\n  selectProps: CreatableProps<OptionType, IsMulti, GroupType>;\n} & SelectCommonProps;\n\n/**\n * We will provide a wrapper to the three distinct select components\n * the library provides:\n * 1. Select (the most simple component)\n * 2. Creatable (for creating new values in our options)\n * 3. Async for fetching while typing, useful for cases that we avoid storing things\n * in browser\n */\n/**\n * @remarks\n * The `type` prop is used to specify the type of select component to render, which will be passed to the underlying React Select component.\n *\n * @remarks\n * The `selectProps` prop is dynamically typed based on the `type` prop and can be one of the following: `StateManagerProps`, `CreatableProps`, `AsyncProps`. All select variants will have the `SelectProps` base type from React Select. For more information on the available props, see the [React Select documentation](https://react-select.com/props).\n */\nexport type SelectProps<\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> =\n  | ReactSelectProps<OptionType, IsMulti, GroupType>\n  | ReactSelectCreatableProps<OptionType, IsMulti, GroupType>\n  | ReactSelectAsyncProps<OptionType, IsMulti, GroupType>;\n\nexport type SelectOverrideCustomProps<\n  OptionType,\n  IsMulti extends boolean = false,\n  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>,\n> = Pick<\n  SelectProps<OptionType, IsMulti, GroupType>,\n  'size' | 'errorText' | 'helpText' | 'isClean'\n> & {\n  errorTextId?: string;\n  helpTextId?: string;\n};\n"]}

package/lib/esm/select/Select.js

@@ -91,18 +91,21 @@ const customStyles = () => {
  */
 export const Select = (_a) => {
     var _b, _c, _d;
-    var { as, label, helpText, errorText, isFluid = true, size = 'medium', type = 'select', ariaLabel, selectProps = {}, isClean = false, isDisabled, htmlAttributes, className, style, ref } = _a, restProps = __rest(_a, ["as", "label", "helpText", "errorText", "isFluid", "size", "type", "ariaLabel", "selectProps", "isClean", "isDisabled", "htmlAttributes", "className", "style", "ref"]);
+    var { as, label, helpText, errorText, isFluid = true, size = 'medium', type = 'select', ariaLabel, selectProps = {}, isClean = false, isDisabled, isRequired = false, hasRequiredIndicator = false, htmlAttributes, className, style, ref } = _a, restProps = __rest(_a, ["as", "label", "helpText", "errorText", "isFluid", "size", "type", "ariaLabel", "selectProps", "isClean", "isDisabled", "isRequired", "hasRequiredIndicator", "htmlAttributes", "className", "style", "ref"]);
     const isInsideDialog = useIsInsideDialog();
     const menuPosition = isInsideDialog ? 'fixed' : 'absolute';
     const identifier = useId();
+    // `selectProps.required` predates `isRequired`, so either one keeps the
+    // indicator and the native validation in sync.
+    const isFieldRequired = isRequired || Boolean(selectProps.required);
     // The shared form field resolves the ids and which message is displayed -
-    // an error always replaces the help text. Select has no required support;
-    // it is deprecated in favor of Combobox, which has isRequired and
-    // hasRequiredIndicator.
+    // an error always replaces the help text.
     const { field } = useFormField({
         controlId: identifier,
         errorText,
+        hasRequiredIndicator,
         helpText,
+        isRequired: isFieldRequired,
         label,
     });
     const helpTextId = field.helpTextId;
@@ -148,14 +151,14 @@ export const Select = (_a) => {
     let SelectElement;
     switch (type) {
         case 'async': {
-            SelectElement = (_jsx(AsyncSelect, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto", "aria-label": ariaLabel, "aria-invalid": Boolean(errorText) }, selectProps, { onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_b = selectProps.menuPosition) !== null && _b !== void 0 ? _b : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = (_jsx(AsyncSelect, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto", "aria-label": ariaLabel, "aria-invalid": Boolean(errorText) }, selectProps, { required: isFieldRequired, onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_b = selectProps.menuPosition) !== null && _b !== void 0 ? _b : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
             break;
         }
         case 'creatable':
-            SelectElement = (_jsx(Creatable, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_c = selectProps.menuPosition) !== null && _c !== void 0 ? _c : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = (_jsx(Creatable, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), required: isFieldRequired, onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_c = selectProps.menuPosition) !== null && _c !== void 0 ? _c : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
             break;
         default:
-            SelectElement = (_jsx(ReactSelect, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_d = selectProps.menuPosition) !== null && _d !== void 0 ? _d : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = (_jsx(ReactSelect, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, "aria-invalid": Boolean(errorText), required: isFieldRequired, onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_d = selectProps.menuPosition) !== null && _d !== void 0 ? _d : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
     }
     const classes = classNames('ndl-select', className, {
         'ndl-creatable': type === 'creatable',

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport ReactSelect, { type GroupBase } from 'react-select';\nimport AsyncSelect from 'react-select/async';\n/** Different types of select components */\nimport Creatable from 'react-select/creatable';\n\nimport {\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"]}
+{"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  isRequired = false,\n  hasRequiredIndicator = false,\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  // `selectProps.required` predates `isRequired`, so either one keeps the\n  // indicator and the native validation in sync.\n  const isFieldRequired = isRequired || Boolean(selectProps.required);\n  // The shared form field resolves the ids and which message is displayed -\n  // an error always replaces the help text.\n  const { field } = useFormField({\n    controlId: identifier,\n    errorText,\n    hasRequiredIndicator,\n    helpText,\n    isRequired: isFieldRequired,\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          required={isFieldRequired}\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          required={isFieldRequired}\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          required={isFieldRequired}\n          onKeyDown={handleKeyDown}\n          onMenuOpen={handleMenuOpen}\n          onMenuClose={handleMenuClose}\n          menuPosition={selectProps.menuPosition ?? menuPosition}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={Boolean(selectProps.isMulti) === false}\n          styles={{ ...StyleOverrides, ...selectProps.styles }}\n          components={{ ...ComponentOverrides, ...selectProps.components }}\n        />\n      );\n  }\n\n  const classes = classNames('ndl-select', className, {\n    'ndl-creatable': type === 'creatable',\n    'ndl-disabled': selectProps.isDisabled,\n    'ndl-fluid': isFluid,\n    'ndl-has-error': Boolean(errorText),\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-multi': selectProps.isMulti,\n    'ndl-small': size === 'small',\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {Boolean(label) && <FormFieldLabel field={field} size={size} />}\n      {SelectElement}\n      <FormFieldMessage field={field} size={size} />\n    </Component>\n  );\n};\n"]}

package/lib/esm/select/stories/index.js

@@ -31,6 +31,7 @@ export { default as SelectMenuPositionings } from './select-menu-positionings.st
 export { default as SelectAsync } from './select-async.story';
 export { default as SelectControlled } from './select-controlled.story';
 export { default as SelectEmpty } from './select-empty.story';
+export { default as SelectRequired } from './select-required.story';
 import { removeLicenseHeader } from '../../_common/export-stories-utils';
 import SelectAsyncSourceRaw from './select-async.story?raw';
 import SelectCleanSourceRaw from './select-clean.story?raw';
@@ -44,6 +45,7 @@ import SelectErrorStateSourceRaw from './select-error-state.story?raw';
 import SelectInsideDialogSourceRaw from './select-inside-dialog.story?raw';
 import SelectMenuPositioningsSourceRaw from './select-menu-positionings.story?raw';
 import SelectMultiSourceRaw from './select-multi.story?raw';
+import SelectRequiredSourceRaw from './select-required.story?raw';
 import SelectSizesSourceRaw from './select-sizes.story?raw';
 export const SelectDefaultSource = removeLicenseHeader(SelectDefaultSourceRaw);
 export const SelectErrorStateSource = removeLicenseHeader(SelectErrorStateSourceRaw);
@@ -58,4 +60,5 @@ export const SelectMenuPositioningsSource = removeLicenseHeader(SelectMenuPositi
 export const SelectAsyncSource = removeLicenseHeader(SelectAsyncSourceRaw);
 export const SelectControlledSource = removeLicenseHeader(SelectControlledSourceRaw);
 export const SelectEmptySource = removeLicenseHeader(SelectEmptySourceRaw);
+export const SelectRequiredSource = removeLicenseHeader(SelectRequiredSourceRaw);
 //# sourceMappingURL=index.js.map

package/lib/esm/select/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/select/stories/index.ts"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as SelectDefault } from './select-default.story';\nexport { default as SelectErrorState } from './select-error-state.story';\nexport { default as SelectCreatable } from './select-creatable.story';\nexport { default as SelectMulti } from './select-multi.story';\nexport { default as SelectCustomLabel } from './select-custom-label.story';\nexport { default as SelectInsideDialog } from './select-inside-dialog.story';\nexport { default as SelectDisabled } from './select-disabled.story';\nexport { default as SelectClean } from './select-clean.story';\nexport { default as SelectSizes } from './select-sizes.story';\nexport { default as SelectMenuPositionings } from './select-menu-positionings.story';\nexport { default as SelectAsync } from './select-async.story';\nexport { default as SelectControlled } from './select-controlled.story';\nexport { default as SelectEmpty } from './select-empty.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport SelectAsyncSourceRaw from './select-async.story?raw';\nimport SelectCleanSourceRaw from './select-clean.story?raw';\nimport SelectControlledSourceRaw from './select-controlled.story?raw';\nimport SelectCreatableSourceRaw from './select-creatable.story?raw';\nimport SelectCustomLabelSourceRaw from './select-custom-label.story?raw';\nimport SelectDefaultSourceRaw from './select-default.story?raw';\nimport SelectDisabledSourceRaw from './select-disabled.story?raw';\nimport SelectEmptySourceRaw from './select-empty.story?raw';\nimport SelectErrorStateSourceRaw from './select-error-state.story?raw';\nimport SelectInsideDialogSourceRaw from './select-inside-dialog.story?raw';\nimport SelectMenuPositioningsSourceRaw from './select-menu-positionings.story?raw';\nimport SelectMultiSourceRaw from './select-multi.story?raw';\nimport SelectSizesSourceRaw from './select-sizes.story?raw';\n\nexport const SelectDefaultSource = removeLicenseHeader(SelectDefaultSourceRaw);\nexport const SelectErrorStateSource = removeLicenseHeader(\n  SelectErrorStateSourceRaw,\n);\nexport const SelectCreatableSource = removeLicenseHeader(\n  SelectCreatableSourceRaw,\n);\nexport const SelectMultiSource = removeLicenseHeader(SelectMultiSourceRaw);\nexport const SelectCustomLabelSource = removeLicenseHeader(\n  SelectCustomLabelSourceRaw,\n);\nexport const SelectInsideDialogSource = removeLicenseHeader(\n  SelectInsideDialogSourceRaw,\n);\nexport const SelectDisabledSource = removeLicenseHeader(\n  SelectDisabledSourceRaw,\n);\nexport const SelectCleanSource = removeLicenseHeader(SelectCleanSourceRaw);\nexport const SelectSizesSource = removeLicenseHeader(SelectSizesSourceRaw);\nexport const SelectMenuPositioningsSource = removeLicenseHeader(\n  SelectMenuPositioningsSourceRaw,\n);\nexport const SelectAsyncSource = removeLicenseHeader(SelectAsyncSourceRaw);\nexport const SelectControlledSource = removeLicenseHeader(\n  SelectControlledSourceRaw,\n);\nexport const SelectEmptySource = removeLicenseHeader(SelectEmptySourceRaw);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/select/stories/index.ts"],"names":[],"mappings":"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","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as SelectDefault } from './select-default.story';\nexport { default as SelectErrorState } from './select-error-state.story';\nexport { default as SelectCreatable } from './select-creatable.story';\nexport { default as SelectMulti } from './select-multi.story';\nexport { default as SelectCustomLabel } from './select-custom-label.story';\nexport { default as SelectInsideDialog } from './select-inside-dialog.story';\nexport { default as SelectDisabled } from './select-disabled.story';\nexport { default as SelectClean } from './select-clean.story';\nexport { default as SelectSizes } from './select-sizes.story';\nexport { default as SelectMenuPositionings } from './select-menu-positionings.story';\nexport { default as SelectAsync } from './select-async.story';\nexport { default as SelectControlled } from './select-controlled.story';\nexport { default as SelectEmpty } from './select-empty.story';\nexport { default as SelectRequired } from './select-required.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport SelectAsyncSourceRaw from './select-async.story?raw';\nimport SelectCleanSourceRaw from './select-clean.story?raw';\nimport SelectControlledSourceRaw from './select-controlled.story?raw';\nimport SelectCreatableSourceRaw from './select-creatable.story?raw';\nimport SelectCustomLabelSourceRaw from './select-custom-label.story?raw';\nimport SelectDefaultSourceRaw from './select-default.story?raw';\nimport SelectDisabledSourceRaw from './select-disabled.story?raw';\nimport SelectEmptySourceRaw from './select-empty.story?raw';\nimport SelectErrorStateSourceRaw from './select-error-state.story?raw';\nimport SelectInsideDialogSourceRaw from './select-inside-dialog.story?raw';\nimport SelectMenuPositioningsSourceRaw from './select-menu-positionings.story?raw';\nimport SelectMultiSourceRaw from './select-multi.story?raw';\nimport SelectRequiredSourceRaw from './select-required.story?raw';\nimport SelectSizesSourceRaw from './select-sizes.story?raw';\n\nexport const SelectDefaultSource = removeLicenseHeader(SelectDefaultSourceRaw);\nexport const SelectErrorStateSource = removeLicenseHeader(\n  SelectErrorStateSourceRaw,\n);\nexport const SelectCreatableSource = removeLicenseHeader(\n  SelectCreatableSourceRaw,\n);\nexport const SelectMultiSource = removeLicenseHeader(SelectMultiSourceRaw);\nexport const SelectCustomLabelSource = removeLicenseHeader(\n  SelectCustomLabelSourceRaw,\n);\nexport const SelectInsideDialogSource = removeLicenseHeader(\n  SelectInsideDialogSourceRaw,\n);\nexport const SelectDisabledSource = removeLicenseHeader(\n  SelectDisabledSourceRaw,\n);\nexport const SelectCleanSource = removeLicenseHeader(SelectCleanSourceRaw);\nexport const SelectSizesSource = removeLicenseHeader(SelectSizesSourceRaw);\nexport const SelectMenuPositioningsSource = removeLicenseHeader(\n  SelectMenuPositioningsSourceRaw,\n);\nexport const SelectAsyncSource = removeLicenseHeader(SelectAsyncSourceRaw);\nexport const SelectControlledSource = removeLicenseHeader(\n  SelectControlledSourceRaw,\n);\nexport const SelectEmptySource = removeLicenseHeader(SelectEmptySourceRaw);\nexport const SelectRequiredSource = removeLicenseHeader(\n  SelectRequiredSourceRaw,\n);\n"]}

package/lib/esm/select/stories/select-required.story.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*!
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { Select } from '@neo4j-ndl/react';
+const EXAMPLE_OPTIONS = [
+    { label: 'Neo4j', value: 'neo4j' },
+    { label: 'Needle 🪡', value: 'needle' },
+    { label: 'Graph Databases', value: 'graph-database' },
+];
+const Component = () => {
+    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-16", children: [_jsx(Select, { label: "Required", type: "select", isRequired: true, hasRequiredIndicator: true, selectProps: {
+                    options: EXAMPLE_OPTIONS,
+                } }), _jsx(Select, { label: "Optional", type: "select", hasRequiredIndicator: true, selectProps: {
+                    options: EXAMPLE_OPTIONS,
+                } })] }));
+};
+export default Component;
+//# sourceMappingURL=select-required.story.js.map

package/lib/esm/select/stories/select-required.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-required.story.js","sourceRoot":"","sources":["../../../../src/select/stories/select-required.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,eAAe,GAAG;IACtB,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;IACvC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,gBAAgB,EAAE;CACtD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,MAAM,IACL,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,QAAQ,EACb,UAAU,QACV,oBAAoB,QACpB,WAAW,EAAE;oBACX,OAAO,EAAE,eAAe;iBACzB,GACD,EACF,KAAC,MAAM,IACL,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,QAAQ,EACb,oBAAoB,QACpB,WAAW,EAAE;oBACX,OAAO,EAAE,eAAe;iBACzB,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Select } from '@neo4j-ndl/react';\n\nconst EXAMPLE_OPTIONS = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Needle 🪡', value: 'needle' },\n  { label: 'Graph Databases', value: 'graph-database' },\n];\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <Select\n        label=\"Required\"\n        type=\"select\"\n        isRequired\n        hasRequiredIndicator\n        selectProps={{\n          options: EXAMPLE_OPTIONS,\n        }}\n      />\n      <Select\n        label=\"Optional\"\n        type=\"select\"\n        hasRequiredIndicator\n        selectProps={{\n          options: EXAMPLE_OPTIONS,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -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      // 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"]}
+{"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  /**\n   * Whether a value is required. Sets `aria-required` and enables native form validation.\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Whether Required or Optional is shown at the end of the label row, based on the `isRequired` prop\n   * @default false\n   */\n  hasRequiredIndicator?: 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/types/select/Select.d.ts

@@ -26,5 +26,5 @@ import { type SelectProps } from './types';
 /**
  * @deprecated Use `Combobox` instead. This component will be removed in a future release.
  */
-export declare const Select: <OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>, T extends React.ElementType = "div">({ as, label, helpText, errorText, isFluid, size, type, ariaLabel, selectProps, isClean, isDisabled, htmlAttributes, className, style, ref, ...restProps }: PolymorphicCommonProps<T, SelectProps<OptionType, IsMulti, GroupType>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>, T extends React.ElementType = "div">({ as, label, helpText, errorText, isFluid, size, type, ariaLabel, selectProps, isClean, isDisabled, isRequired, hasRequiredIndicator, htmlAttributes, className, style, ref, ...restProps }: PolymorphicCommonProps<T, SelectProps<OptionType, IsMulti, GroupType>>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

package/lib/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAU3D,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAkB/D,OAAO,EAAkC,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAuE3E;;GAEG;AACH,eAAO,MAAM,MAAM,GACjB,UAAU,EACV,OAAO,SAAS,OAAO,GAAG,KAAK,EAC/B,SAAS,SAAS,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC,EAC/D,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,2JAiBC,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,4CAqKxE,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAU3D,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAkB/D,OAAO,EAAkC,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAuE3E;;GAEG;AACH,eAAO,MAAM,MAAM,GACjB,UAAU,EACV,OAAO,SAAS,OAAO,GAAG,KAAK,EAC/B,SAAS,SAAS,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC,EAC/D,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACnC,6LAmBC,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,4CA2KxE,CAAC"}

package/lib/types/select/stories/index.d.ts

@@ -31,6 +31,7 @@ export { default as SelectMenuPositionings } from './select-menu-positionings.st
 export { default as SelectAsync } from './select-async.story';
 export { default as SelectControlled } from './select-controlled.story';
 export { default as SelectEmpty } from './select-empty.story';
+export { default as SelectRequired } from './select-required.story';
 export declare const SelectDefaultSource: string;
 export declare const SelectErrorStateSource: string;
 export declare const SelectCreatableSource: string;
@@ -44,4 +45,5 @@ export declare const SelectMenuPositioningsSource: string;
 export declare const SelectAsyncSource: string;
 export declare const SelectControlledSource: string;
 export declare const SelectEmptySource: string;
+export declare const SelectRequiredSource: string;
 //# sourceMappingURL=index.d.ts.map

package/lib/types/select/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/select/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAiB9D,eAAO,MAAM,mBAAmB,QAA8C,CAAC;AAC/E,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,qBAAqB,QAEjC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,uBAAuB,QAEnC,CAAC;AACF,eAAO,MAAM,wBAAwB,QAEpC,CAAC;AACF,eAAO,MAAM,oBAAoB,QAEhC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,4BAA4B,QAExC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAA4C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/select/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAkBpE,eAAO,MAAM,mBAAmB,QAA8C,CAAC;AAC/E,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,qBAAqB,QAEjC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,uBAAuB,QAEnC,CAAC;AACF,eAAO,MAAM,wBAAwB,QAEpC,CAAC;AACF,eAAO,MAAM,oBAAoB,QAEhC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,4BAA4B,QAExC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,oBAAoB,QAEhC,CAAC"}

package/lib/types/select/stories/select-required.story.d.ts

@@ -0,0 +1,24 @@
+/*!
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=select-required.story.d.ts.map

package/lib/types/select/stories/select-required.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-required.story.d.ts","sourceRoot":"","sources":["../../../../src/select/stories/select-required.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAUjD,QAAA,MAAM,SAAS,+CAsBd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/select/types.d.ts

@@ -35,6 +35,16 @@ export type SelectCommonProps = {
     isClean?: boolean;
     /** Whether the select component is disabled */
     isDisabled?: boolean;
+    /**
+     * Whether a value is required. Sets `aria-required` and enables native form validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Whether Required or Optional is shown at the end of the label row, based on the `isRequired` prop
+     * @default false
+     */
+    hasRequiredIndicator?: boolean;
     /** Additional class name */
     className?: string;
     /** Additional style */

package/lib/types/select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/select/types.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/select/types.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.25.0",
+  "version": "4.25.1",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [

package/skills/ndl-react/SKILL.md

@@ -2,7 +2,7 @@
 name: ndl-react
 metadata:
   package: '@neo4j-ndl/react'
-  version: '4.25.0'
+  version: '4.25.1'
 description: >-
   Build and edit UI with the Neo4j Needle React design system
   (@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
@@ -15,7 +15,7 @@ description: >-
 
 # Neo4j Needle (@neo4j-ndl/react)
 
-> 📌 Shipped with `@neo4j-ndl/react` v4.25.0. Once installed into your repo (e.g. via
+> 📌 Shipped with `@neo4j-ndl/react` v4.25.1. Once installed into your repo (e.g. via
 > `npx skills add`) this folder is detached from the package — the installed
 > package (TypeScript types in `node_modules/@neo4j-ndl/react`) is the source of
 > truth.
@@ -176,7 +176,7 @@ Import from `@neo4j-ndl/react`.
 | `RadioGroup` | [components/radio-group.md](components/radio-group.md) | ✅ | 8 |
 | `ReadOnlyTag` | [components/read-only-tag.md](components/read-only-tag.md) |  | 4 |
 | `SegmentedControl` | [components/segmented-control.md](components/segmented-control.md) | ✅ | 5 |
-| `Select` | [components/select.md](components/select.md) |  | 13 |
+| `Select` | [components/select.md](components/select.md) |  | 14 |
 | `SelectIconButton` | [components/select-icon-button.md](components/select-icon-button.md) |  | 4 |
 | `SelectableTag` | [components/selectable-tag.md](components/selectable-tag.md) |  | 6 |
 | `SideNavigation` | [components/side-navigation.md](components/side-navigation.md) |  | 4 |

package/skills/ndl-react/components/select.md

@@ -15,10 +15,12 @@ Import: `import { Select } from '@neo4j-ndl/react'`
 | `ariaLabel` | `string` |  |  | Aria label of the select component |
 | `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `errorText` | `ReactNode` |  |  | Error message, if it exists the select will be in error state |
+| `hasRequiredIndicator` | `boolean` |  | `false` | Whether Required or Optional is shown at the end of the label row, based on the `isRequired` prop |
 | `helpText` | `ReactNode` |  |  | Help text of the select component |
 | `isClean` | `boolean` |  | `false` | 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. |
 | `isDisabled` | `boolean` |  |  | Whether the select component is disabled |
 | `isFluid` | `boolean` |  | `true` | Whether the select component is fluid |
+| `isRequired` | `boolean` |  | `false` | Whether a value is required. Sets `aria-required` and enables native form validation. |
 | `label` | `ReactNode` |  |  | Label of the select component. If not provided, please provide an ariaLabel. |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `selectProps` | `StateManagerProps<OptionType, IsMulti, GroupType> \| CreatableProps<OptionType, IsMulti, GroupType> \| AsyncProps<...>` |  | `{}` | Props of the select component, based of React Select props |
@@ -482,6 +484,46 @@ const Component = (props: React.ComponentProps<typeof Select>) => {
 export default Component;
 ```
 
+### Required
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Select } from '@neo4j-ndl/react';
+
+const EXAMPLE_OPTIONS = [
+  { label: 'Neo4j', value: 'neo4j' },
+  { label: 'Needle 🪡', value: 'needle' },
+  { label: 'Graph Databases', value: 'graph-database' },
+];
+
+const Component = () => {
+  return (
+    <div className="n-flex n-flex-col n-gap-token-16">
+      <Select
+        label="Required"
+        type="select"
+        isRequired
+        hasRequiredIndicator
+        selectProps={{
+          options: EXAMPLE_OPTIONS,
+        }}
+      />
+      <Select
+        label="Optional"
+        type="select"
+        hasRequiredIndicator
+        selectProps={{
+          options: EXAMPLE_OPTIONS,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
 ### Sizes
 
 ```tsx