@ultraviolet/ui 1.47.0 → 1.48.0

package/dist/src/components/SelectInputV2/index.js

@@ -0,0 +1,138 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { useRef } from 'react';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { Dropdown } from './Dropdown.js';
+import { SelectBar } from './SelectBar.js';
+import { SelectInputProvider } from './SelectInputProvider.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const SelectInputContainer = /*#__PURE__*/_styled("div", {
+  target: "ebdnz3x1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} : {
+  name: "1d3w5wq",
+  styles: "width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const HelperText = /*#__PURE__*/_styled(Text, {
+  target: "ebdnz3x0"
+})("padding-top:", ({
+  theme
+}) => theme.space['0.5'], ";");
+
+/**
+ * SelectInputV2 component is used to select one or many elements from a selection.
+ */
+const SelectInputV2 = ({
+  name,
+  id,
+  onBlur,
+  onFocus,
+  onChange,
+  'aria-label': ariaLabel,
+  value,
+  label,
+  helper,
+  options,
+  size = 'large',
+  emptyState,
+  descriptionDirection = 'column',
+  success,
+  error,
+  'data-testid': dataTestId,
+  className,
+  footer,
+  placeholderSearch = 'Search in list',
+  placeholder = 'Select item',
+  searchable = true,
+  disabled = false,
+  readOnly = false,
+  clearable = true,
+  multiselect = false,
+  required = false,
+  labelDescription,
+  autofocus,
+  loadMore,
+  optionalInfoPlacement = 'right',
+  isLoading,
+  selectAll,
+  selectAllGroup = false
+}) => {
+  const ref = useRef(null);
+  const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.filter(option => !option.disabled).length, 0);
+  return jsx(SelectInputProvider, {
+    options: options,
+    multiselect: multiselect,
+    selectAll: selectAll,
+    value: value,
+    selectAllGroup: selectAllGroup,
+    numberOfOptions: numberOfOptions,
+    children: jsxs(SelectInputContainer, {
+      id: id,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      "data-testid": dataTestId,
+      className: className,
+      "aria-label": name,
+      children: [jsx(Dropdown, {
+        emptyState: emptyState,
+        descriptionDirection: descriptionDirection,
+        searchable: searchable,
+        placeholder: placeholderSearch,
+        footer: footer,
+        onChange: onChange,
+        refSelect: ref,
+        loadMore: loadMore,
+        optionalInfoPlacement: optionalInfoPlacement,
+        isLoading: isLoading,
+        children: jsxs(Stack, {
+          gap: 0.5,
+          "aria-label": ariaLabel,
+          children: [jsxs(Stack, {
+            direction: "row",
+            gap: 0.5,
+            children: [label ? jsx(Text, {
+              as: "label",
+              variant: size === 'large' ? 'bodyStrong' : 'bodySmallStrong',
+              children: label
+            }) : null, required ? jsx(Icon, {
+              name: "asterisk",
+              sentiment: "danger",
+              size: 8
+            }) : null, labelDescription ?? null]
+          }), jsx(SelectBar, {
+            size: size,
+            clearable: clearable,
+            readOnly: readOnly,
+            disabled: disabled,
+            placeholder: placeholder,
+            success: success,
+            error: error,
+            onChange: onChange,
+            autoFocus: autofocus,
+            innerRef: ref
+          })]
+        })
+      }), !error && !success ? jsx(HelperText, {
+        variant: "caption",
+        as: "p",
+        sentiment: "neutral",
+        prominence: "default",
+        children: helper
+      }) : null, error || success ? jsx(HelperText, {
+        variant: "caption",
+        as: "p",
+        sentiment: error ? 'danger' : 'success',
+        prominence: "default",
+        children: error || success
+      }) : null]
+    })
+  });
+};
+
+export { SelectInputV2 };

package/dist/src/components/SelectInputV2/types.js

@@ -0,0 +1,11 @@
+const INPUT_SIZE_HEIGHT = {
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const SIZES_TAG = {
+  letterWidth: 5,
+  tagWidth: 72
+};
+
+export { INPUT_SIZE_HEIGHT, SIZES_TAG };

package/dist/src/components/TextInputV2/index.js

@@ -114,7 +114,8 @@ const TextInputV2 = /*#__PURE__*/forwardRef(({
   maxLength,
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
-  autoComplete
+  autoComplete,
+  onKeyDown
 }, ref) => {
   const localId = useId();
   const [hasFocus, setHasFocus] = useState(false);
@@ -205,7 +206,8 @@ const TextInputV2 = /*#__PURE__*/forwardRef(({
             "aria-labelledby": ariaLabelledBy,
             "aria-label": ariaLabel,
             autoComplete: autoComplete,
-            required: required
+            required: required,
+            onKeyDown: onKeyDown
           }), success || error || loading || computedClearable ? jsxs(StateStack, {
             direction: "row",
             gap: 1,

package/dist/src/index.js

@@ -73,3 +73,4 @@ export { MenuV2 } from './components/MenuV2/index.js';
 export { GlobalAlert } from './components/GlobalAlert/index.js';
 export { NotificationContainer, notification } from './components/Notification/index.js';
 export { SelectableCardGroup } from './components/SelectableCardGroup/index.js';
+export { SelectInputV2 } from './components/SelectInputV2/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.47.0",
+  "version": "1.48.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -43,7 +43,7 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@types/react": "18.2.78",
+    "@types/react": "18.2.79",
     "@types/react-datepicker": "4.19.6",
     "@types/react-dom": "18.2.25",
     "react": "18.2.0",
@@ -56,8 +56,8 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scales": "0.80.0",
-    "@scaleway/random-name": "5.0.0",
-    "@scaleway/use-media": "3.0.0",
+    "@scaleway/random-name": "5.0.1",
+    "@scaleway/use-media": "3.0.1",
     "deepmerge": "4.3.1",
     "react-datepicker": "4.25.0",
     "react-select": "5.8.0",
@@ -65,7 +65,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.10.0",
-    "@ultraviolet/icons": "2.12.4"
+    "@ultraviolet/icons": "2.12.5"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",