diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx index 7051a8f0994..af5580bf2ee 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx @@ -111,6 +111,7 @@ Read more about other addons [on the open-source project](https://github.com/tex | `inputs` | array of [MultiInputMaskInput](/uilib/components/input-masked/properties/#multiinputmask-inputs-properties) that defines the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange` | | `values` | _(optional)_ values used for the inputs in the component. Expects an object with keys matching the id's defined in `inputs` | | `delimiter` | _(optional)_ character that separates the input inputs. | +| `stretch` | _(optional)_ use `true` in order to stretch the input to the available space. Defaults to false. | | `status` | _(optional)_ text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message.`. | | `statusState` | _(optional)_ defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error. | | `suffix` | _(optional)_ Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component. | diff --git a/packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx b/packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx index a96aa920d6e..18ddd611beb 100644 --- a/packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx +++ b/packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx @@ -67,6 +67,10 @@ export type MultiInputMaskProps = { * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ statusState?: FormStatusState + /** + * Set it to `true` in order to stretch the input to the available space. Defaults to false. + */ + stretch?: boolean /** * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component. */ @@ -88,6 +92,7 @@ function MultiInputMask({ statusState, values: defaultValues, className, + stretch, suffix, ...props }: MultiInputMaskProps) { @@ -138,6 +143,7 @@ function MultiInputMask({ status={status} status_state={statusState} suffix={suffix} + stretch={stretch} input_element={inputs.map((input, index) => ( any; on_submit_blur?: (...args: any[]) => any; on_state_update?: (...args: any[]) => any; + /** + * Will be called on a clear button click. Returns `{ value, previousValue, event }`. + */ on_clear?: (...args: any[]) => any; } export default class Input extends React.Component {