@ultraviolet/ui 1.47.0 → 1.48.0

package/dist/index.d.ts

@@ -1567,7 +1567,7 @@ type CheckboxProps = {
     required?: boolean;
     'data-testid'?: string;
     tooltip?: string;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'value' | 'autoFocus' | 'id' | 'onChange'> & XOR<[
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'value' | 'autoFocus' | 'id' | 'onChange' | 'tabIndex'> & XOR<[
     {
         /**
          * **`children` or `aria-label` property is required**
@@ -2468,6 +2468,7 @@ type OptionComponent = (props: Partial<OptionProps<SelectOption> & SelectOption>
 /**
  * SelectInput component is a wrapper around [react-select](https://react-select.com) component.
  * It provides a styled select input with a label and an error message.
+ * @deprecated use SelectInputV2 component instead
  */
 declare const SelectInput: ForwardRefExoticComponent<Partial<SelectInputProps>> & {
     Option: OptionComponent;
@@ -3097,7 +3098,7 @@ declare const TextInputV2: react.ForwardRefExoticComponent<{
     tooltip?: string | undefined;
     type?: "text" | "email" | "password" | "url" | undefined;
     value?: string | undefined;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "tabIndex" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "name" | "disabled" | "autoComplete" | "placeholder" | "readOnly" | "required"> & react.RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "tabIndex" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onKeyDown" | "name" | "disabled" | "autoComplete" | "placeholder" | "readOnly" | "required"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const schedules: {
     half: readonly ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"];
@@ -3430,6 +3431,129 @@ declare const SelectableCardGroup: {
     Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: CardSelectableCardProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
+type OptionType = {
+    value: string;
+    label: ReactNode;
+    disabled: boolean;
+    description?: string;
+    optionalInfo?: ReactNode;
+    searchText?: string;
+};
+type DataType = Record<string, OptionType[]> | OptionType[];
+
+type SelectInputV2Props = {
+    /**
+     * Input name
+     */
+    name: string;
+    /**
+     * Default value, must be one of the options
+     */
+    value?: OptionType;
+    /**
+     * Place holder when no value defined
+     */
+    placeholder?: string;
+    /**
+     * When searchable, placeholder when no value is searched
+     */
+    placeholderSearch?: string;
+    /**
+     * Label of the component
+     */
+    label?: string;
+    /**
+     * Helper text to give more information to the user
+     */
+    helper?: string;
+    /**
+     * Selectable options
+     */
+    options: DataType;
+    /**
+     * Message to show when no option available
+     */
+    emptyState?: ReactNode;
+    /**
+     * Whether it is possible to search through the input
+     */
+    searchable?: boolean;
+    /**
+     * Whether the component in disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component in readOnly
+     */
+    readOnly?: boolean;
+    /**
+     * Whether it is possible to clear the search input
+     */
+    clearable?: boolean;
+    /**
+     * Size of the input
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether it is possible to select multiple options
+     */
+    multiselect?: boolean;
+    /**
+     * Whether field is required
+     */
+    required?: boolean;
+    /**
+     * More information regarding/description ofs the selectInput
+     */
+    labelDescription?: ReactNode;
+    /**
+     * Whether option description is on the right of the option or under it
+     */
+    descriptionDirection?: 'row' | 'column';
+    /**
+     * Where to place the additional info prop
+     */
+    optionalInfoPlacement?: 'left' | 'right';
+    /**
+     * To add custom fixed elements at the bottom of the dropdown
+     */
+    footer?: ReactNode;
+    /**
+     * Display an error message under the select bar
+     */
+    error?: string;
+    /**
+     * Display a success message under the select bar
+     */
+    success?: string;
+    /**
+     * Load more button to implement lazy loading
+     */
+    loadMore?: ReactNode;
+    /**
+     * When the options are loading, display a skeleton
+     */
+    isLoading?: boolean;
+    /**
+     * Adds an option to select every selectable options
+     */
+    selectAll?: {
+        label: ReactNode;
+        description?: string;
+    };
+    /**
+     * When options are group, define a option to select every selectable options of a group
+     */
+    selectAllGroup?: boolean;
+    autofocus?: boolean;
+    'data-testid'?: string;
+    onChange?: (value: string[]) => void;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'>;
+/**
+ * SelectInputV2 component is used to select one or many elements from a selection.
+ */
+declare const SelectInputV2: ({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, }: SelectInputV2Props) => _emotion_react_jsx_runtime.JSX.Element;
+
 declare const getUUID: (prefix?: string) => string;
 
 declare const bounce: _emotion_react.Keyframes;
@@ -3473,4 +3597,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NotificationContainer, NumberInput, NumberInputV2, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, SelectableCardGroup, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TextInputV2, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, notification, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NotificationContainer, NumberInput, NumberInputV2, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectInputV2, SelectableCard, SelectableCardGroup, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TextInputV2, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, notification, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };

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

@@ -210,7 +210,8 @@ const Checkbox = /*#__PURE__*/forwardRef(({
   'aria-label': ariaLabel,
   required,
   'data-testid': dataTestId,
-  tooltip
+  tooltip,
+  tabIndex
 }, ref) => {
   const [state, setState] = useState(checked);
   const uniqId = useId();
@@ -253,7 +254,8 @@ const Checkbox = /*#__PURE__*/forwardRef(({
         name: name,
         autoFocus: autoFocus,
         ref: ref,
-        required: required
+        required: required,
+        tabIndex: tabIndex
       }), !progress ? jsx(StyledIcon, {
         size: size,
         viewBox: "0 0 24 24",

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

@@ -27,7 +27,7 @@ const StyledPopup = /*#__PURE__*/_styled(Popup, {
 }) => `${theme.space['0.25']} 0`, ";");
 const MenuList = /*#__PURE__*/_styled(Stack, {
   target: "e1jn11gg0"
-})("max-height:480px;overflow-y:auto;overflow-x:hidden;&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", ({
+})("overflow-y:auto;overflow-x:hidden;&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", ({
   theme
 }) => theme.colors.neutral.backgroundWeakElevated, ";color:", ({
   theme
@@ -86,7 +86,7 @@ const FwdMenu = /*#__PURE__*/forwardRef(({
     ref: popupRef,
     onClose: () => setIsVisible(false),
     tabIndex: -1,
-    maxHeight: maxHeight,
+    maxHeight: maxHeight ?? '480px',
     maxWidth: maxWidth,
     size: size,
     text: jsx(MenuList, {

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

@@ -598,6 +598,7 @@ const FwdSelectInput = ({
 /**
  * SelectInput component is a wrapper around [react-select](https://react-select.com) component.
  * It provides a styled select input with a label and an error message.
+ * @deprecated use SelectInputV2 component instead
  */
 const SelectInput = /*#__PURE__*/forwardRef((props, ref) => jsx(FwdSelectInput, {
   innerRef: ref,