diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index 4634c860716..244440a5e48 100644 --- a/packages/dnb-design-system-portal/package.json +++ b/packages/dnb-design-system-portal/package.json @@ -50,12 +50,12 @@ "react-live-ssr": "workspace:*" }, "devDependencies": { - "@babel/core": "7.16.0", + "@babel/core": "7.22.5", "@babel/eslint-parser": "7.18.2", - "@babel/node": "7.16.0", + "@babel/node": "7.22.5", "@emotion/cache": "11.9.3", "@typescript-eslint/parser": "5.60.0", - "babel-jest": "29.3.1", + "babel-jest": "29.5.0", "camelcase": "6.2.0", "cross-env": "7.0.3", "current-git-branch": "1.1.0", diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json index dd0f5544552..009f87479af 100644 --- a/packages/dnb-eufemia/package.json +++ b/packages/dnb-eufemia/package.json @@ -102,7 +102,7 @@ ], "typings": "./index.d.ts", "dependencies": { - "@babel/runtime": "7.16.3", + "@babel/runtime": "7.22.5", "classnames": "2.3.1", "core-js": "3.26.1", "date-fns": "2.25.0", @@ -115,25 +115,25 @@ "react-dom": "^17" }, "devDependencies": { - "@babel/cli": "7.16.0", - "@babel/core": "7.16.0", - "@babel/eslint-parser": "7.18.2", - "@babel/node": "7.16.0", - "@babel/parser": "7.16.3", - "@babel/plugin-proposal-class-properties": "7.16.0", - "@babel/plugin-proposal-export-default-from": "7.16.0", - "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0", - "@babel/plugin-proposal-object-rest-spread": "7.16.0", - "@babel/plugin-proposal-optional-chaining": "7.16.0", + "@babel/cli": "7.22.5", + "@babel/core": "7.22.5", + "@babel/eslint-parser": "7.22.5", + "@babel/node": "7.22.5", + "@babel/parser": "7.22.5", + "@babel/plugin-proposal-class-properties": "7.18.6", + "@babel/plugin-proposal-export-default-from": "7.22.5", + "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", + "@babel/plugin-proposal-object-rest-spread": "7.20.7", + "@babel/plugin-proposal-optional-chaining": "7.21.0", "@babel/plugin-syntax-dynamic-import": "7.8.3", - "@babel/plugin-syntax-typescript": "7.16.0", - "@babel/plugin-transform-modules-commonjs": "7.16.0", - "@babel/plugin-transform-react-constant-elements": "7.16.0", - "@babel/plugin-transform-runtime": "7.16.0", - "@babel/preset-env": "7.16.0", - "@babel/preset-react": "7.16.0", - "@babel/preset-typescript": "7.16.0", - "@babel/traverse": "7.16.3", + "@babel/plugin-syntax-typescript": "7.22.5", + "@babel/plugin-transform-modules-commonjs": "7.22.5", + "@babel/plugin-transform-react-constant-elements": "7.22.5", + "@babel/plugin-transform-runtime": "7.22.5", + "@babel/preset-env": "7.22.5", + "@babel/preset-react": "7.22.5", + "@babel/preset-typescript": "7.22.5", + "@babel/traverse": "7.22.5", "@emotion/react": "11.9.3", "@emotion/styled": "11.9.3", "@reach/router": "1.3.4", @@ -166,9 +166,9 @@ "@typescript-eslint/eslint-plugin": "5.60.0", "@typescript-eslint/parser": "5.60.0", "audit-ci": "5.1.2", - "babel-jest": "29.3.1", + "babel-jest": "29.5.0", "babel-plugin-optimize-clsx": "2.6.2", - "babel-plugin-search-and-replace": "1.1.0", + "babel-plugin-search-and-replace": "1.1.1", "babel-plugin-transform-react-remove-prop-types": "0.4.24", "browserslist": "4.21.4", "camelcase": "6.2.0", diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginCorrectTypes.test.js.snap b/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginCorrectTypes.test.js.snap index d188ce494dc..2211b55d215 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginCorrectTypes.test.js.snap +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginCorrectTypes.test.js.snap @@ -5,6 +5,7 @@ exports[`babelPluginCorrectTypes has to match snapshot 1`] = ` * Test mock file * */ + import React from 'react'; import { PropTypes } from "react"; import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent'; @@ -26,7 +27,6 @@ export default class PrimaryComponent extends React.PureComponent { render() { return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children]; } - } PrimaryComponent.propTypes = { boolean: PropTypes.bool, @@ -61,11 +61,9 @@ PrimaryComponent.defaultProps = { }; PrimaryComponent.Secondary = SecondaryComponent; PrimaryComponent.SecondaryDuplication = SecondaryComponent; - const Element = () => { return null; }; - Element.propTypes = { boolean: PropTypes.bool, number: PropTypes.number, diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginIncludeDocs.test.js.snap b/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginIncludeDocs.test.js.snap index a1993631786..5dadb68065c 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginIncludeDocs.test.js.snap +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginIncludeDocs.test.js.snap @@ -5,6 +5,7 @@ exports[`babelPluginIncludeDocs has to match code snapshot 1`] = ` * Test mock file * */ + import React from 'react'; import { PropTypes } from "react"; import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent'; @@ -26,7 +27,6 @@ export default class PrimaryComponent extends React.PureComponent { render() { return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children]; } - } PrimaryComponent.propTypes = { boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -61,11 +61,9 @@ PrimaryComponent.defaultProps = { }; PrimaryComponent.Secondary = SecondaryComponent; PrimaryComponent.SecondaryDuplication = SecondaryComponent; - const Element = () => { return null; }; - Element.propTypes = { boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -101,6 +99,7 @@ exports[`babelPluginIncludeDocs has to match code snapshot in strict mode 1`] = * Test mock file * */ + import React from 'react'; import { PropTypes } from "react"; import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent'; @@ -122,7 +121,6 @@ export default class PrimaryComponent extends React.PureComponent { render() { return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children]; } - } PrimaryComponent.propTypes = { boolean: PropTypes.bool, @@ -157,11 +155,9 @@ PrimaryComponent.defaultProps = { }; PrimaryComponent.Secondary = SecondaryComponent; PrimaryComponent.SecondaryDuplication = SecondaryComponent; - const Element = () => { return null; }; - Element.propTypes = { boolean: PropTypes.bool, number: PropTypes.number, @@ -197,6 +193,7 @@ exports[`babelPluginIncludeDocs has to match collectProps snapshot given by onCo * Test mock file * */ + import React from 'react'; import { PropTypes } from "react"; import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent'; @@ -218,7 +215,6 @@ export default class PrimaryComponent extends React.PureComponent { render() { return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children]; } - } PrimaryComponent.propTypes = { boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -253,11 +249,9 @@ PrimaryComponent.defaultProps = { }; PrimaryComponent.Secondary = SecondaryComponent; PrimaryComponent.SecondaryDuplication = SecondaryComponent; - const Element = () => { return null; }; - Element.propTypes = { boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginPropTypesRelations.test.js.snap b/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginPropTypesRelations.test.js.snap index 050f1f5e6e7..afc091a03e1 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginPropTypesRelations.test.js.snap +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginPropTypesRelations.test.js.snap @@ -5,6 +5,7 @@ exports[`babelPluginPropTypesRelations has to match snapshot 1`] = ` * Test mock file * */ + import React from 'react'; import PropTypes from 'prop-types'; import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent'; @@ -26,7 +27,6 @@ export default class PrimaryComponent extends React.PureComponent { render() { return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children]; } - } PrimaryComponent.propTypes = { boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -61,11 +61,9 @@ PrimaryComponent.defaultProps = { }; PrimaryComponent.Secondary = SecondaryComponent; PrimaryComponent.SecondaryDuplication = SecondaryComponent; - const Element = () => { return null; }; - Element.propTypes = { boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), diff --git a/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts b/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts index d33b91015da..7b55229a38a 100644 --- a/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts +++ b/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts @@ -14,7 +14,6 @@ export type AccordionIcon = | IconIcon | { closed?: React.ReactNode | ((...args: any[]) => any); - /** * If set to `true` the accordion will be expanded as its initial state. */ @@ -30,108 +29,87 @@ export interface AccordionProps */ title?: React.ReactNode; description?: React.ReactNode; - /** * If set to `true` the accordion will be expanded as its initial state. */ expanded?: boolean; - /** * If set to `true`, the open and close animation will be omitted. */ no_animation?: boolean; - /** * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that's mainly a technical aspect to consider. */ expanded_ssr?: boolean; - /** * If set to `true` the content will be present, even the accordion is not expanded. Can be useful for assistive technology or SEO. */ prerender?: boolean; - /** * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don't have control of storing the temporary state during an interaction. */ prevent_rerender?: boolean; - /** * Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match the previous one anymore. */ prevent_rerender_conditional?: boolean; - /** * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage. */ remember_state?: boolean; - /** * Send along a custom React Ref for `.dnb-accordion__content`. */ contentRef?: Record; - /** * If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set. */ flush_remembered_state?: boolean; - /** * If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens. */ single_container?: boolean; - /** * Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`. */ variant?: AccordionVariant; - /** * Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`. */ left_component?: React.ReactNode; - /** * If set to `true`, the accordion button will be disabled (dimmed). */ disabled?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; - /** * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required. */ id?: string; group?: string; - /** * Gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included. */ element?: React.ReactNode; - /** * If set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property. */ heading?: AccordionHeading; - /** * If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`. */ heading_level?: HeadingLevel; - /** * Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`. */ icon?: AccordionIcon; - /** * Will set the placement of the icon. Defaults to `left`. */ icon_position?: AccordionIconPosition; - /** * Define a different icon size. Defaults to `medium` (1.5rem). */ @@ -140,16 +118,13 @@ export interface AccordionProps class?: string; className?: string; children?: React.ReactNode; - /** * Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`. */ on_change?: (...args: any[]) => any; on_state_update?: (...args: any[]) => any; } - const StoreInstance = (group: string, id?: string) => new Store(group, id); - export default class Accordion extends React.Component< AccordionProps, any @@ -166,7 +141,6 @@ export type GroupProps = { allow_close_all?: boolean; expanded_id?: string; } & AccordionProps; - declare class Group extends React.Component { static defaultProps: object; static Store: StoreInstance; diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts index d2cb5a5313b..c380af15c94 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts +++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts @@ -48,220 +48,177 @@ export interface AutocompleteProps * If set to `async`, it prevents showing the "no options" message during typing / filtering. Defaults to `sync`. */ mode?: AutocompleteMode; - /** * Give a title to let the user know what they have to do. Defaults to `Skriv og få alternativer`. */ title?: AutocompleteTitle; - /** * Use this to define the pre-filled placeholder text in the input. Defaults to `title="Skriv og velg"`. */ placeholder?: AutocompletePlaceholder; - /** * Text show in the "no options" item. Defaults to `Ingen alternativer`. */ no_options?: AutocompleteNoOptions; - /** * Text that lets a user unravel all the available options. Defaults to `Vis alt`. */ show_all?: AutocompleteShowAll; - /** * Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`. */ aria_live_options?: AutocompleteAriaLiveOptions; - /** * Text show on indicator "options" item. Defaults to `Henter data ...`. */ indicator_label?: AutocompleteIndicatorLabel; - /** * Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`. */ show_options_sr?: string; - /** * Only for screen readers (VocieOver). The label used to announce the selected item. Defaults to `Valgt:`. */ selected_sr?: string; - /** * Title on submit button. Defaults to `Vis alternativer`. */ submit_button_title?: string; - /** * The icon used in the submit button. Defaults to `chevron_down`. */ submit_button_icon?: AutocompleteSubmitButtonIcon; - /** * Use a React.Ref to get access to the `input` DOM element. */ input_ref?: AutocompleteInputRef; - /** * To be included in the autocomplete input. */ icon?: IconIcon; - /** * Change the size of the icon pragmatically. */ icon_size?: IconSize; - /** * Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`. */ icon_position?: ButtonIconPosition; - /** * Same as `icon`. */ input_icon?: AutocompleteInputIcon; - /** * Prepends the Form Label component. If no ID is provided, a random ID is created. */ label?: FormLabelText; - /** * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. */ label_direction?: FormLabelLabelDirection; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. */ keep_value?: boolean; - /** * Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. */ keep_value_and_selection?: boolean; - /** * If set to `true`, a clear button is shown inside the input field. Defaults to `false`. */ show_clear_button?: boolean; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: boolean; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; - /** * If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`. */ disable_filter?: boolean; - /** * If set to `true`, reordering of search results will be disabled. Defaults to `false`. */ disable_reorder?: boolean; - /** * If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`. */ disable_highlighting?: boolean; - /** * Use `true` to show a Autocomplete button to toggle the DrawerList. Defaults to `false`. */ show_submit_button?: boolean; - /** * Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from '@dnb/eufemia/components/input/Input'`. */ submit_element?: React.ReactNode; - /** * Use `right` to change the options alignment direction. Defaults to `left`. */ align_autocomplete?: AutocompleteAlignAutocomplete; - /** * Lets you provide a custom React element as the input HTML element. */ input_element?: AutocompleteInputElement; - /** * This gives you the possibility to change the threshold number, which defines from what word on we search "inside words". Defaults to `3`. */ search_in_word_index?: AutocompleteSearchInWordIndex; - /** * If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`. */ search_numbers?: boolean; - /** * Lets you define a custom input value. */ input_value?: string; - /** * Use `true` to auto open the list once the user is entering the input field with the keyboard. */ open_on_focus?: boolean; disabled?: boolean; - /** * If set to `true`, then the autocomplete will be 100% in available `width`. */ stretch?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; - /** * Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`. */ drawer_class?: string; ariaLiveDelay?: number; - /** * Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods. */ on_type?: (...args: any[]) => any; - /** * Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods. */ on_focus?: (...args: any[]) => any; - /** * Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods. */ on_blur?: (...args: any[]) => any; - /** * Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including these methods. The "active_item" property is the currently selected item by keyboard navigation */ diff --git a/packages/dnb-eufemia/src/components/button/Button.d.ts b/packages/dnb-eufemia/src/components/button/Button.d.ts index 99b78ded8ae..68358cefb72 100644 --- a/packages/dnb-eufemia/src/components/button/Button.d.ts +++ b/packages/dnb-eufemia/src/components/button/Button.d.ts @@ -43,114 +43,92 @@ export type ButtonProps = { * The content of the button can be a string or a React Element. */ text?: ButtonText; - /** * `button`, `reset` or `submit` for the `type` HTML attribute. Defaults to `button` for legacy reasons. */ type?: string; - /** * Title of the button. Optional, but should always be included because of accessibility. */ title?: React.ReactNode; - /** * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only). */ variant?: ButtonVariant; - /** * The size of the button. For now there is "medium", "default" and "large". */ size?: ButtonSize; - /** * To be included in the button. Primary Icons can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements. */ icon?: ButtonIcon; - /** * Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set. */ icon_position?: ButtonIconPositionAll; - /** * Define icon width and height. Defaults to 16px. */ icon_size?: IconSize; - /** * Provide a string or a React Element to be shown as the tooltip content. */ tooltip?: ButtonTooltip; - /** * Set it to either `status="error"` or a 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: boolean; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; id?: string; - /** * Any extra modifying class. */ class?: string; - /** * If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. */ href?: string; - /** * When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`. */ target?: string; - /** * When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`. */ rel?: string; - /** * Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url. */ to?: ButtonTo; - /** * If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself. */ custom_content?: React.ReactNode; - /** * If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`. */ wrap?: boolean; - /** * Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case. */ bounding?: boolean; - /** * Set it to `true` in order to stretch the button to the available space. Defaults to false. */ stretch?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ @@ -159,17 +137,14 @@ export type ButtonProps = { inner_ref?: any; className?: string; innerRef?: any; - /** * The content of the button can be a string or a React Element. */ children?: ButtonChildren; - /** * Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not. */ element?: ButtonElement; - /** * Will be called on a click event. Returns an object with the native event: `{ event }`. */ diff --git a/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts b/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts index a9aab72194d..b72e2c78c32 100644 --- a/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts +++ b/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts @@ -23,56 +23,46 @@ export interface CheckboxProps * Use either the `label` property or provide a custom one. */ label?: FormLabelText; - /** * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. */ label_position?: CheckboxLabelPosition; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * The `title` of the input - describing it a bit further for accessibility reasons. */ title?: string; element?: React.ReactNode; - /** * Determine whether the checkbox is checked or not. The default is `false`. */ checked?: boolean; disabled?: boolean; id?: string; - /** * The size of the checkbox. For now there is "medium" (default) and "large". */ size?: CheckboxSize; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: boolean; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; - /** * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component. */ @@ -80,7 +70,6 @@ export interface CheckboxProps value?: string; attributes?: CheckboxAttributes; readOnly?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ @@ -88,7 +77,6 @@ export interface CheckboxProps class?: string; className?: string; children?: CheckboxChildren; - /** * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`. */ @@ -105,4 +93,4 @@ export interface CheckIconProps { */ size?: string; } -export const CheckIcon: React.FC; +export declare const CheckIcon: React.FC; diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts index bd38e83278e..b04f060a25b 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts +++ b/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts @@ -30,110 +30,89 @@ export interface DatePickerProps SpacingProps { id?: string; title?: string; - /** * Defines the pre-filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`. */ date?: DatePickerDate; - /** * To set the pre-filled starting date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`. */ start_date?: DatePickerStartDate; - /** * To set the pre-filled ending date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`. */ end_date?: DatePickerEndDate; - /** * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`. */ month?: DatePickerMonth; - /** * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`. */ start_month?: DatePickerStartMonth; - /** * To display what month should be shown in the second calendar by default. Defaults to the `date` respective `start_date`. */ end_month?: DatePickerEndMonth; - /** * To limit a date range to a minimum `start_date`. Defaults to `null`. */ min_date?: DatePickerMinDate; - /** * To limit a date range to a maximum `end_date`. Defaults to `null`. */ max_date?: DatePickerMaxDate; correct_invalid_date?: boolean; - /** * To define the order of the masked placeholder input fields. Defaults to `dd/mm/yyyy` */ mask_order?: string; - /** * To display the placeholder on input. Defaults to `dd/mm/åååå`. */ mask_placeholder?: string; - /** * Defines how the prop dates (`date`, `start_date` and `end_date`) should be parsed, e.g. `yyyy/MM/dd`. Defaults to `yyyy-MM-dd`. */ date_format?: string; - /** * Defines how the returned date, as a string, should be formatted as. Defaults to `yyyy-MM-dd`. */ return_format?: string; - /** * If set to `true`, the navigation will be hidden. Defaults to `false`. */ hide_navigation?: boolean; hide_navigation_buttons?: boolean; - /** * If set to `true`, the week days will be hidden. Defaults to `false`. */ hide_days?: boolean; - /** * Use `true` to only show the defined month. Disables the month navigation possibility. Defaults to `false`. */ only_month?: boolean; - /** * Use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`. */ hide_last_week?: boolean; - /** * Once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`. */ disable_autofocus?: boolean; enable_keyboard_nav?: boolean; - /** * If the input fields with the mask should be visible. Defaults to `false`. */ show_input?: boolean; - /** * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown. */ show_submit_button?: boolean; - /** * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown. */ show_cancel_button?: boolean; - /** * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text="Tilbakestill"` Defaults to `false`. */ @@ -142,104 +121,84 @@ export interface DatePickerProps cancel_button_text?: string; reset_button_text?: string; reset_date?: boolean; - /** * To define the first day of the week. Defaults to `monday`. */ first_day?: string; - /** * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. */ locale?: Record; - /** * If the date picker should support a range of two dates (starting and ending date). Defaults to `false`. */ range?: boolean; - /** * Link both calendars, once to the user is navigating between months. Only meant to use if the range is set to `true`. Defaults to `false`. */ link?: boolean; - /** * Sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`. */ sync?: boolean; - /** * A prepending label in sync with the date input field. */ label?: FormLabelText; - /** * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. */ label_direction?: FormLabelLabelDirection; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * Gives you the possibility to use a plain/vanilla `` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => ()}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input. */ input_element?: InputInputElement; - /** * Gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`. */ addon_element?: DatePickerAddonElement; - /** * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below. */ shortcuts?: DatePickerShortcuts; disabled?: boolean; - /** * If set to `true`, then the date-picker input field will be 100% in `width`. */ stretch?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; - /** * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. */ size?: InputSize; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: boolean; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; - /** * Text describing the content of the DatePicker more than the label. You can also send in a React component, so it gets wrapped inside the DatePicker component. */ suffix?: DatePickerSuffix; - /** * To open the date-picker by default. Defaults to `false`. */ @@ -247,49 +206,40 @@ export interface DatePickerProps prevent_close?: boolean; no_animation?: boolean; direction?: DatePickerDirection; - /** * Use `right` to change the calendar alignment direction. Defaults to `left`. */ align_picker?: DatePickerAlignPicker; class?: string; className?: string; - /** * Will be called right before every new calendar view gets rendered. See the example above. */ on_days_render?: (...args: any[]) => any; - /** * Will be called on a date change event. Returns an `object`. See Returned Object below. */ on_change?: (...args: any[]) => any; - /** * Will be called on every input and date picker interaction. Returns an `object`. See Returned Object below. */ on_type?: (...args: any[]) => any; - /** * Will be called once date-picker is visible. */ on_show?: (...args: any[]) => any; - /** * Will be called once date-picker is hidden. */ on_hide?: (...args: any[]) => any; - /** * Will be called once a user presses the submit button. */ on_submit?: (...args: any[]) => any; - /** * Will be called once a user presses the cancel button. */ on_cancel?: (...args: any[]) => any; - /** * Will be called once a user presses the reset button. */ diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.d.ts index eb5c5891e9a..cb8cfa7a328 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.d.ts +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.d.ts @@ -3,7 +3,6 @@ export interface DatePickerCalendarProps extends React.HTMLProps { id?: string; nr?: number; - /** * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`. */ @@ -22,7 +21,6 @@ export interface DatePickerCalendarProps onSelect?: (...args: any[]) => any; onPrev?: (...args: any[]) => any; onNext?: (...args: any[]) => any; - /** * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. */ diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.d.ts index e5decf6e310..e589ddc249f 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.d.ts +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.d.ts @@ -16,43 +16,35 @@ export interface DatePickerInputProps separatorRexExp?: RegExp; submitAttributes?: Record; isRange?: boolean; - /** * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. */ size?: InputSize; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; - /** * Gives you the possibility to use a plain/vanilla `` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => ()}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input. */ input_element?: InputInputElement; - /** * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. */ locale?: Record; disabled?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; - /** * To open the date-picker by default. Defaults to `false`. */ diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js index 065f4432f88..929864cc6fa 100644 --- a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js @@ -777,5 +777,4 @@ const InputElement = (props) => { ) } -// const pad = (num, size) => ('000000000' + num).substr(-size) const wait = (t) => new Promise((r) => setTimeout(r, t)) diff --git a/packages/dnb-eufemia/src/components/dropdown/Dropdown.d.ts b/packages/dnb-eufemia/src/components/dropdown/Dropdown.d.ts index 681c3873887..27559e4a8e6 100644 --- a/packages/dnb-eufemia/src/components/dropdown/Dropdown.d.ts +++ b/packages/dnb-eufemia/src/components/dropdown/Dropdown.d.ts @@ -26,89 +26,72 @@ export interface DropdownProps * Give a title to let the users know what they have to do. Defaults to `Valgmeny`. */ title?: DropdownTitle; - /** * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`. */ variant?: ButtonVariant; - /** * Icon to be included in the dropdown. */ icon?: IconIcon; - /** * Change the size of the icon pragmatically. */ icon_size?: IconSize; - /** * Position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`. */ icon_position?: ButtonIconPosition; - /** * Prepends the Form Label component. If no ID is provided, a random ID is created. */ label?: FormLabelText; - /** * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. */ label_direction?: FormLabelLabelDirection; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: boolean; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; - /** * Same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`. */ more_menu?: boolean; - /** * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`. */ align_dropdown?: DropdownAlignDropdown; - /** * Lets you provide a custom React element as the trigger HTML element. */ trigger_element?: DropdownTriggerElement; - /** * If set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action. */ open_on_focus?: boolean; disabled?: boolean; - /** * If set to `true`, then the dropdown will be 100% in available `width`. */ stretch?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ diff --git a/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts b/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts index 121914b18b2..2d7d023ba07 100644 --- a/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts +++ b/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts @@ -17,17 +17,14 @@ export interface FormLabelProps * (required) the `id` of the input. */ for_id?: string; - /** * Defines the HTML element used. Defaults to `label`. */ element?: string; - /** * The `title` attribute of the label. */ title?: string; - /** * The `text` of the label. */ @@ -35,13 +32,11 @@ export interface FormLabelProps id?: string; class?: string; disabled?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; label_direction?: FormLabelLabelDirection; - /** * If set to `true`, will do the same as `label_direction` when set to "vertical". */ diff --git a/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts b/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts index a4cacd84441..4fad79cc321 100644 --- a/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts +++ b/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts @@ -14,80 +14,65 @@ export interface FormRowProps extends Omit, 'ref'>, SpacingProps { id?: string; - /** * Use either the `label` property or provide a custom one. */ label?: FormLabelText; - /** * Use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`. */ label_direction?: FormLabelLabelDirection; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; label_id?: string; - /** * If you need to style the "legend", then you can either send in a custom Component, like `label={

}`, or define your styling class with the `label_class` property. */ label_class?: string; no_label?: boolean; - /** * If set to `true`, then the internal `legend` element will be a `label` instead, and no `
` is used. Keep in mind, that `` and `
` is only used if a `label` is provided. Defaults to `false`. */ no_fieldset?: boolean; - /** * Send along a different locale to all nested components. */ locale?: Locale; - /** * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`. */ wrap?: boolean; - /** * To define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. */ direction?: FormRowDirection; - /** * Will force both `direction` and `label_direction` to be "vertical" if set to `true`. */ vertical?: boolean; - /** * Will center all children vertically as long as the screen does not hit a mobile width. */ centered?: boolean; - /** * To enable the visual helper `.dnb-section` class. Use a supported modifier from the Section component. Defaults to `null`. */ section_style?: SectionStyleTypes; - /** * To modify the `spacing`. Use a supported modifier from the Section component. Defaults to `null`. */ section_spacing?: SectionSpacing; globalStatus?: GlobalStatusConfigObject; - /** * To force responsiveness on form components (like Input and their labels (FormLabel), set the prop to `true`. Defaults to `false`. */ responsive?: boolean; - /** * If set to `true`, every component inside will be disabled. Defaults to `false`. */ disabled?: boolean; - /** * If set to `true`, it enables skeleton for nested components. Defaults to `false`. */ diff --git a/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts b/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts index 7ca1c6e3676..d768d76fc00 100644 --- a/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts +++ b/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts @@ -17,91 +17,74 @@ export interface FormSetProps * Define what HTML element should be used. Defaults to `
`. */ element?: string; - /** * If set to `true`, then a `div` HTML element will be used instead of `form`. Defaults to `false`. */ no_form?: boolean; - /** * If set to `true`, every component inside will be disabled. Defaults to `false`. */ disabled?: boolean; - /** * If set to `true`, it enables skeleton for nested components. Defaults to `false`. */ skeleton?: SkeletonShow; - /** * If set to `true`, components inside can't cause a page refresh. The event `on_submit` will still be triggered. Defaults to `false`. */ prevent_submit?: boolean; id?: string; - /** * Use either the `label` property or provide a custom one. */ label?: FormLabelText; - /** * Use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`. */ label_direction?: FormLabelLabelDirection; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; label_id?: string; - /** * If you need to style the "legend", then you can either send in a custom Component, like `label={

}`, or define your styling class with the `label_class` property. */ label_class?: string; no_label?: boolean; - /** * If set to `true`, then the internal `legend` element will be a `label` instead, and no `
` is used. Keep in mind, that `` and `
` is only used if a `label` is provided. Defaults to `false`. */ no_fieldset?: boolean; - /** * Send along a different locale to all nested components. */ locale?: Locale; - /** * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`. */ wrap?: boolean; - /** * To define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. */ direction?: FormSetDirection; - /** * Will force both `direction` and `label_direction` to be "vertical" if set to `true`. */ vertical?: boolean; - /** * Will center all children vertically as long as the screen does not hit a mobile width. */ centered?: boolean; - /** * To enable the visual helper `.dnb-section` class. Use a supported modifier from the Section component. Defaults to `null`. */ section_style?: SectionStyleTypes; - /** * To modify the `spacing`. Use a supported modifier from the Section component. Defaults to `null`. */ section_spacing?: SectionSpacing; globalStatus?: GlobalStatusConfigObject; - /** * To force responsiveness on form components (like Input and their labels (FormLabel), set the prop to `true`. Defaults to `false`. */ @@ -110,7 +93,6 @@ export interface FormSetProps skipContentWrapperIfNested?: boolean; className?: string; children?: FormSetChildren; - /** * Will be called on submit. Returns an object with a native event: `{ event }` */ diff --git a/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts b/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts index 2e0f5a3e099..63d0ae25f8f 100644 --- a/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts +++ b/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts @@ -26,47 +26,38 @@ export interface FormStatusProps extends Omit, 'ref'>, SpacingProps { id?: string; - /** * The `title` attribute in the status. */ title?: string; - /** * Provide `false` if you want to animate the visibility. Defaults to `true`. */ show?: boolean; - /** * The `text` appears as the status message. Beside plain text, you can send in a React component as well. */ text?: FormStatusText; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; - /** * The `icon` show before the status text. Defaults to `exclamation`. */ icon?: IconIcon; - /** * The icon size of the icon shows. Defaults to `medium`. */ icon_size?: IconSize; - /** * Defines the visual appearance of the status. These are the statuses `error`, `warn`, `info` and `marketing`. The default status is `error`. */ state?: FormStatusState; - /** * As of now, there is the `flat` and the `outlined` variant. Defaults to `flat`. */ variant?: FormStatusVariant; - /** * Defines the appearance size. There are these sizes `default`, `large`. The default status is `default`. */ @@ -76,28 +67,23 @@ export interface FormStatusProps width_selector?: string; width_element?: Record; class?: string; - /** * NB: Animation is disabled as of now. use `true` to omit the animation on content visibility. Defaults to `false`. */ no_animation?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; - /** * If set to `true`, then the FormStatus will be 100% in available `width`. "NB:" Only use this on independent status messages. */ stretch?: boolean; - /** * The `role` attribute for accessibility, defaults to `alert` */ role?: string; className?: string; - /** * The `text` appears as the status message. Beside plain text, you can send in a React component as well. */ @@ -116,25 +102,25 @@ export interface ErrorIconProps { */ title?: string; } -export const ErrorIcon: React.FC; +export declare const ErrorIcon: React.FC; export interface WarnIconProps { /** * The `title` attribute in the status. */ title?: string; } -export const WarnIcon: React.FC; +export declare const WarnIcon: React.FC; export interface InfoIconProps { /** * The `title` attribute in the status. */ title?: string; } -export const InfoIcon: React.FC; +export declare const InfoIcon: React.FC; export interface MarketingIconProps { /** * The `title` attribute in the status. */ title?: string; } -export const MarketingIcon: React.FC; +export declare const MarketingIcon: React.FC; diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts index 7a475e1b059..83dfaa9e9c1 100644 --- a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts +++ b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts @@ -31,79 +31,64 @@ export interface GlobalStatusProps */ id?: string; status_id?: string; - /** * The title appears as a part of the status content. Defaults to `En feil har skjedd`. */ title?: GlobalStatusTitle; default_title?: string; - /** * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. */ text?: GlobalStatusText; - /** * The items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. See "Item Object" example below. */ items?: GlobalStatusItem[]; - /** * The icon shown before the status title. Defaults to `exclamation`. */ icon?: IconIcon; - /** * The icon size of the title icon shows. Defaults to `medium`. */ icon_size?: IconSize; - /** * Defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`. */ state?: GlobalStatusState; - /** * Set to `true` or `false` to manually make the global status visible. Defaults to `true`. */ show?: GlobalStatusShow; - /** * Set to `true` to automatically scroll the page to the appeared global status. Defaults to `true`. */ autoscroll?: boolean; - /** * Set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`. */ autoclose?: boolean; - /** * Set to `true` to disable the show/hide/slide/fade/grow/shrink animation. Defaults to `false`. */ no_animation?: boolean; - /** * Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`. */ delay?: GlobalStatusDelay; - /** * Text of the close button. Defaults to `Lukk`. */ close_text?: React.ReactNode; - /** * Set to `true` if the close button should be hidden for the user. Defaults to `false`. */ hide_close_button?: boolean; - /** * Set to `true` to omit setting the focus during visibility. Defaults to `false`. Additionally, there is `omit_set_focus_on_update` which is set to `true` by default. */ omit_set_focus?: boolean; omit_set_focus_on_update?: boolean; - /** * Defines the anchor text showing up after every item, in case there is a `status_id` defined. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition. */ @@ -111,32 +96,26 @@ export interface GlobalStatusProps skeleton?: SkeletonShow; class?: string; className?: string; - /** * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. */ children?: GlobalStatusChildren; - /** * Gets triggered once the GlobalStatus is getting new content by the user. Returns `{ id, status_id, ...properties }`. */ on_adjust?: (...args: any[]) => any; - /** * Gets triggered the first time the GlobalStatus appears on the screen. In other words, it has to have been hidden before. Returns `{ id, status_id, ...properties }`. */ on_open?: (...args: any[]) => any; - /** * Gets triggered for the first time and for every new content update the GlobalStatus gets. Returns `{ id, status_id, ...properties }`. */ on_show?: (...args: any[]) => any; - /** * Gets triggered once the GlobalStatus disappears from the screen. Works only if `no_animation` is not `true`. Returns `{ id, status_id, ...properties }`. */ on_close?: (...args: any[]) => any; - /** * Gets triggered once the GlobalStatus is getting closed/hidden by the user. Returns `{ id, status_id, ...properties }`. */ @@ -149,23 +128,19 @@ export type GlobalStatusAddProps = { */ id: string; status_id: GlobalStatusStatusId; - /** * The title appears as a part of the status content. Defaults to `En feil har skjedd`. */ title?: string; - /** * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. */ text: string; item?: GlobalStatusItem; - /** * The items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. See "Item Object" example below. */ items?: GlobalStatusItem[]; - /** * Gets triggered once the GlobalStatus disappears from the screen. Works only if `no_animation` is not `true`. Returns `{ id, status_id, ...properties }`. */ @@ -176,7 +151,6 @@ export type GlobalStatusUpdateProps = { * The main ID. Defaults to `main`. */ id: string; - /** * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. */ @@ -195,18 +169,15 @@ export type GlobalStatusInterceptorProps = { * The main ID. Defaults to `main`. */ id: string; - /** * The title appears as a part of the status content. Defaults to `En feil har skjedd`. */ title: string; - /** * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. */ text: string; status_id: GlobalStatusStatusId; - /** * Set to `true` or `false` to manually make the global status visible. Defaults to `true`. */ @@ -218,22 +189,18 @@ export type GlobalStatusInterceptorUpdateEvents = { * Gets triggered for the first time and for every new content update the GlobalStatus gets. Returns `{ id, status_id, ...properties }`. */ on_show?: () => void; - /** * Gets triggered once the GlobalStatus is getting closed/hidden by the user. Returns `{ id, status_id, ...properties }`. */ on_hide?: () => void; - /** * Gets triggered once the GlobalStatus disappears from the screen. Works only if `no_animation` is not `true`. Returns `{ id, status_id, ...properties }`. */ on_close?: () => void; - /** * Set to `true` or `false` to manually make the global status visible. Defaults to `true`. */ show?: boolean; - /** * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. */ diff --git a/packages/dnb-eufemia/src/components/icon/Icon.d.ts b/packages/dnb-eufemia/src/components/icon/Icon.d.ts index ce1bced0c57..e377ac2eb1a 100644 --- a/packages/dnb-eufemia/src/components/icon/Icon.d.ts +++ b/packages/dnb-eufemia/src/components/icon/Icon.d.ts @@ -18,44 +18,36 @@ export interface IconProps * (required) a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`). */ icon?: IconIcon; - /** * Modifier class to define. Will result in: `dnb-icon--${modifier}`. */ modifier?: string; - /** * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`. */ size?: IconSize; width?: IconWidth; height?: IconHeight; - /** * Use `true` to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of `+0.5em`. */ border?: boolean; - /** * The color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the colors table, e.g. `var(--color-ocean-green)`. Default is no color, which means `--color-black-80`. */ color?: IconColor; - /** * Defaults to `true`. Set to `false` if you do not want to inherit the color by `currentColor`. */ inherit_color?: boolean; - /** * The alternative label (text version) of the icon. Defaults to the imported icon name. */ alt?: string; - /** * Use a title to provide extra information about the icon used. */ title?: string; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts b/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts index 4d24b653ca2..ddbd1b0650f 100644 --- a/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts +++ b/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts @@ -54,241 +54,195 @@ export interface InputMaskedProps * A mask can be defined both as a RegExp style of characters or a callback function. Example below. */ mask?: InputMaskedMask; - /** * Set to `true` to enable the default numbers formatting – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. */ number_mask?: InputMaskedNumberMask; - /** * Set to `true` or set the valuta (currency_mask="kr") to enable a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`. */ currency_mask?: InputMaskedCurrencyMask; - /** * Use it to manipulate internal masks. You can use it instead of e.g. `number_mask` or `curreny_mask`. All options are listed below. */ mask_options?: InputMaskedMaskOptions; - /** * Use an object with NumberFormat e.g. `{ omit_rounding: false }`. */ number_format?: NumberFormatProps; - /** * Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the Eufemia Provider if not given. Defaults to `nb-NO`. */ locale?: Locale; - /** * Set to `true` to use `NOK` or give it a currency code e.g. `USD` to automatically set a currency mask based on the given or inherited locale. */ as_currency?: InputMaskedAsCurrency; - /** * Set to `true` to automatically set a number mask based on the given or inherited locale. */ as_number?: boolean; - /** * Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale. */ as_percent?: boolean; - /** * Show mask when input is empty and has no focus. Defaults to `false`. */ show_mask?: boolean; - /** * When `false` is given, it doesn't print out placeholder characters and only adds mask characters when the user reaches them as they're typing. Defaults to `true`. */ show_guide?: boolean; pipe?: (...args: any[]) => any; - /** * When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`. */ keep_char_positions?: boolean; - /** * The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space. */ placeholder_char?: string; - /** * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. */ inner_ref?: React.Ref; - /** * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`. */ on_change?: (...args: any[]) => any; - /** * Will be called on submit button click. Returns `{ value, event }`. */ on_submit?: (...args: any[]) => any; - /** * Will be called on focus set by the user. Returns `{ value, event }`. */ on_focus?: (...args: any[]) => any; - /** * Will be called on blur set by the user. Returns `{ value, event }`. */ on_blur?: (...args: any[]) => any; on_submit_focus?: (...args: any[]) => any; on_submit_blur?: (...args: any[]) => any; - /** * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`. */ type?: string; - /** * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if you define a number like `size="2"` then it will be forwarded as the input element attribute. */ size?: InputSize; - /** * The content value of the input. */ value?: InputMaskedValue; id?: string; - /** * Prepends the Form Label component. If no ID is provided, a random ID is created. */ label?: FormLabelText; - /** * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. */ label_direction?: FormLabelLabelDirection; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: boolean; - /** * Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`. */ input_state?: string; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; - /** * Defaults to `off`. Set to `on` or any of allowed `attributes`. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `` element, 3. and have a submit button inside the form. */ autocomplete?: string; - /** * Title attribute for the search icon. Only relevant if search input. */ submit_button_title?: string; clear_button_title?: string; - /** * The placeholder which shows up once the input value is empty */ placeholder?: string; - /** * If set to `true`, then a clear button will be shown which lets the user clear any given input value. */ clear?: boolean; - /** * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus. */ keep_placeholder?: 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. */ suffix?: InputMaskedSuffix; - /** * Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`. */ align?: InputMaskedAlign; - /** * If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position. */ selectall?: boolean; - /** * If set to `true`, then the input field will be 100% in `width`. */ stretch?: boolean; disabled?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; class?: string; - /** * In case we have to set a custom input class. */ input_class?: string; - /** * Provide the Input element with any attributes by using an Object `input_attributes={{size:'2'}}` or a JSON Object `input_attributes='{"size":"2"}'`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute. */ input_attributes?: InputInputAttributes; - /** * (internal) by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`. */ input_element?: InputInputElement; - /** * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px. */ icon?: IconIcon; - /** * The icon size of the icon shows. Defaults to `medium`. */ icon_size?: IconSize; - /** * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set. */ icon_position?: ButtonIconPosition; readOnly?: boolean; - /** * (internal) by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component. */ inner_element?: React.ReactNode; - /** * Accepts a React element which will show up like the "submit button" would do on `type="search"`. */ diff --git a/packages/dnb-eufemia/src/components/input/Input.d.ts b/packages/dnb-eufemia/src/components/input/Input.d.ts index d56fde35ad0..c8066f34779 100644 --- a/packages/dnb-eufemia/src/components/input/Input.d.ts +++ b/packages/dnb-eufemia/src/components/input/Input.d.ts @@ -36,153 +36,124 @@ export interface InputProps * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`. */ type?: string; - /** * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if you define a number like `size="2"` then it will be forwarded as the input element attribute. */ size?: InputSize; - /** * The content value of the input. */ value?: InputValue; id?: string; - /** * Prepends the Form Label component. If no ID is provided, a random ID is created. */ label?: FormLabelText; - /** * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. */ label_direction?: FormLabelLabelDirection; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * 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. */ status?: FormStatusText; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: boolean; - /** * Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`. */ input_state?: string; - /** * Defaults to `off`. Set to `on` or any of allowed `attributes`. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `` element, 3. and have a submit button inside the form. */ autocomplete?: string; - /** * Title attribute for the search icon. Only relevant if search input. */ submit_button_title?: string; clear_button_title?: string; - /** * The placeholder which shows up once the input value is empty */ placeholder?: string; - /** * If set to `true`, then a clear button will be shown which lets the user clear any given input value. */ clear?: boolean; - /** * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus. */ keep_placeholder?: 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. */ suffix?: InputSuffix; - /** * Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`. */ align?: InputAlign; - /** * If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position. */ selectall?: boolean; - /** * If set to `true`, then the input field will be 100% in `width`. */ stretch?: boolean; disabled?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; class?: string; - /** * In case we have to set a custom input class. */ input_class?: string; - /** * Provide the Input element with any attributes by using an Object `input_attributes={{size:'2'}}` or a JSON Object `input_attributes='{"size":"2"}'`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute. */ input_attributes?: InputInputAttributes; - /** * (internal) by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`. */ input_element?: InputInputElement; - /** * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px. */ icon?: IconIcon; - /** * The icon size of the icon shows. Defaults to `medium`. */ icon_size?: IconSize; - /** * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set. */ icon_position?: ButtonIconPosition; - /** * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. */ inner_ref?: React.Ref; readOnly?: boolean; - /** * (internal) by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component. */ inner_element?: React.ReactNode; - /** * Accepts a React element which will show up like the "submit button" would do on `type="search"`. */ @@ -192,27 +163,22 @@ export interface InputProps submit_button_status?: string; className?: string; children?: InputChildren; - /** * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`. */ on_change?: (...args: any[]) => any; - /** * Will be called on key down by the user. Returns `{ value, event }`. */ on_key_down?: (...args: any[]) => any; - /** * Will be called on submit button click. Returns `{ value, event }`. */ on_submit?: (...args: any[]) => any; - /** * Will be called on focus set by the user. Returns `{ value, event }`. */ on_focus?: (...args: any[]) => any; - /** * Will be called on blur set by the user. Returns `{ value, event }`. */ @@ -227,7 +193,6 @@ export default class Input extends React.Component { } export interface SubmitButtonProps extends React.HTMLProps { id?: string; - /** * The content value of the input. */ @@ -235,43 +200,35 @@ export interface SubmitButtonProps extends React.HTMLProps { title?: string; variant?: ButtonVariant; disabled?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; - /** * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px. */ icon?: IconIcon; - /** * The icon size of the icon shows. Defaults to `medium`. */ icon_size?: IconSize; - /** * 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. */ status?: FormStatusText; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; className?: string; - /** * Will be called on submit button click. Returns `{ value, event }`. */ diff --git a/packages/dnb-eufemia/src/components/logo/Logo.d.ts b/packages/dnb-eufemia/src/components/logo/Logo.d.ts index 57a861fc3c9..7fc53d849f5 100644 --- a/packages/dnb-eufemia/src/components/logo/Logo.d.ts +++ b/packages/dnb-eufemia/src/components/logo/Logo.d.ts @@ -13,33 +13,27 @@ export interface LogoProps */ size?: LogoSize; ratio?: LogoRatio; - /** * Define either the width of the logo. */ width?: LogoWidth; - /** * Or define the height of the logo. */ height?: LogoHeight; alt?: string; - /** * Define the color of the logo. */ color?: IconColor; - /** * Define which brand's logo to show. `ui` (DNB) or `sbanken`. Defaults to `ui`. */ brand?: string; - /** * Define the logo variant, if there is more than one variant of a brand's logo. Currently the only option other than default is a `compact` variant of the Sbanken logo. Defaults to `default`. */ variant?: string; - /** * Set to `true` if you do not want to inherit the color by `currentColor`. Defaults to `false`. */ diff --git a/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts b/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts index cfe09ed4ee2..2d4ee0b43df 100644 --- a/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts +++ b/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts @@ -27,32 +27,26 @@ export interface NumberFormatProps extends React.HTMLProps, SpacingProps { id?: string; - /** * (required) a number. */ value?: NumberFormatValue; - /** * Use a 2 Letter Language Codes or an extended code such as `nb-NO`. Use `auto` to detect the locale from the browser (`navigator.language`). Defaults to the Norwegian locale: `nb-NO`. */ locale?: Locale; - /** * Add a string or React component before the number, including white space. */ prefix?: NumberFormatPrefix; - /** * Appends a string or React component after the number, including white space. */ suffix?: NumberFormatSuffix; - /** * Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default. */ currency?: NumberFormatCurrency; - /** * Use either empty/false to hide the sign/name or use `code` (NOK), `name` (norske kroner) , `symbol` (kr) or `narrowSymbol` (for a shorter symbol variant). Defaults to `narrowSymbol` when the locale is `no` else we default to `code`. */ @@ -63,109 +57,88 @@ export interface NumberFormatProps | 'narrowSymbol' | '' | false; - /** * Use either `before` or `after` to change/define the position of the currency. Defaults to `auto` (Browser API defaults, but with an exception, if the locale is `nb-NO` or `no`, use after as the default position). */ currency_position?: NumberFormatCurrencyPosition; - /** * Shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either `short` or `long`. Defaults to `short` if `true` is given. */ compact?: NumberFormatCompact; - /** * "Bank Account Number": use `true` to use the default Norwegian style (2000 12 34567) formatting. */ ban?: boolean; - /** * "National Identification Number": use `true` to use the default Norwegian style (180892 12345) formatting. */ nin?: boolean; - /** * Use `true` to use the default Norwegian style (22 22 22 22) of phone number formatting, regulated by the Norwegian authority. More info by Sprakradet as well. */ phone?: boolean; - /** * "Organization Number": use `true` to use the default Norwegian style (123 456 789) formatting. Screen readers get digit by digit. */ org?: boolean; - /** * "Percentage": use `true` to enable percent formatting. */ percent?: boolean; - /** * Use `tel` or `sms` to enable a clickable / touchable anchor link. */ link?: NumberFormatLink; - /** * Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. `options={{ 'minimumFractionDigits': 2 }}`. */ options?: NumberFormatOptions; - /** * Set a number to define the number of decimals. Like `decimals="0"` will ensure that decimals are simply not shown. The default decimals for currency usage are `2` (Browser API default). */ decimals?: NumberFormatDecimals; - /** * Use `false` to disable the auto select all on the first click. Defaults to `true`. */ selectall?: boolean; - /** * Use `true` to always auto select all on the first click. Defaults to `false`. */ always_selectall?: boolean; - /** * Use `false` to disable the auto copy feature. Defaults to `true`. */ copy_selection?: boolean; - /** * If set to `true` the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to `false`. */ clean_copy_value?: boolean; - /** * If set to `true`, the decimal will NOT be rounded. Normally, by using `toFixed` or by using `maximumFractionDigits`, decimals get rounded. */ omit_rounding?: boolean; - /** * If set to `true` a dirty string will be parsed to to extract the number (`prefix -123.45 suffix` would result in e.g. `kr -123,45`). */ clean?: boolean; - /** * Will add a visually hidden label to give screen reader users the missing context to understand easier what the number represents. */ srLabel?: React.ReactNode; - /** * Define what HTML element should be used. Defaults to ``. */ element?: NumberFormatElement; - /** * Provide a string or a React Element to be shown as the tooltip content. */ tooltip?: NumberFormatTooltip; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; class?: string; className?: string; - /** * (required) a number. */ diff --git a/packages/dnb-eufemia/src/components/pagination/Pagination.d.ts b/packages/dnb-eufemia/src/components/pagination/Pagination.d.ts index 6f2c05c0ae3..b6a59d06149 100644 --- a/packages/dnb-eufemia/src/components/pagination/Pagination.d.ts +++ b/packages/dnb-eufemia/src/components/pagination/Pagination.d.ts @@ -41,160 +41,129 @@ export interface PaginationProps * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well. */ startup_page?: PaginationStartupPage; - /** * The page shown at the moment the component renders. Defaults to `1`. */ current_page?: PaginationCurrentPage; - /** * The total pages count. Defaults to `1`. */ page_count?: PaginationPageCount; - /** * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`. */ startup_count?: PaginationStartupCount; - /** * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`. */ parallel_load_count?: PaginationParallelLoadCount; - /** * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`. */ place_maker_before_content?: boolean; - /** * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds. */ min_wait_time?: PaginationMinWaitTime; - /** * If set to `true`, all pagination bar buttons are disabled. */ disabled?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ skeleton?: SkeletonShow; - /** * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the Infinity Scroller. Defaults to `pagination`. */ mode?: PaginationMode; - /** * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead. */ use_load_button?: boolean; items?: PaginationItems; - /** * If set to `true` no indicator will be shown. */ hide_progress_indicator?: boolean; - /** * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode. */ set_content_handler?: PaginationSetContentHandler; - /** * Callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content. */ reset_content_handler?: PaginationResetContentHandler; - /** * Callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states. */ reset_pagination_handler?: PaginationResetPaginationHandler; - /** * Callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown. */ end_infinity_handler?: PaginationEndInfinityHandler; - /** * By default a `
` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown. */ page_element?: PaginationPageElement; - /** * (infinity mode) is used by the indicator, load more bar as well as by the marker. Defaults to a `div`. */ fallback_element?: PaginationFallbackElement; - /** * (infinity mode) is used by the internal marker. Falls back to `fallback_element` if not defined. */ marker_element?: PaginationMarkerElement; - /** * (infinity mode) is used by the indicator. Falls back to `fallback_element` if not defined. */ indicator_element?: PaginationIndicatorElement; - /** * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`. */ align?: string; - /** * The title used in every button shown in the bar. Defaults to `Side %s`. */ button_title?: string; - /** * The title used in the previous page button. Defaults to `Forrige side`. */ prev_title?: string; - /** * The title used in the next page button. Defaults to `Neste side`. */ next_title?: string; - /** * The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`. */ more_pages?: string; - /** * Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`. */ is_loading_text?: string; - /** * Used during infinity mode. If `use_load_button` is set to `true`, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`. */ load_button_text?: string; class?: string; className?: string; - /** * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. */ children?: PaginationChildren; - /** * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details. */ on_change?: (...args: any[]) => any; - /** * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`. */ on_startup?: (...args: any[]) => any; - /** * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details. */ on_load?: (...args: any[]) => any; - /** * Only on "infinity" mode. Will be called once `page_count` is reached or `endInfinity` was called. */ @@ -257,163 +226,131 @@ interface PaginationInstanceProps extends SpacingProps { /** * The page shown at the moment the component renders. Defaults to `1`. */ - current_page?: PaginationInstanceCurrentPage; /** * The total pages count. Defaults to `1`. */ - page_count?: PaginationInstancePageCount; /** * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`. */ - startup_count?: PaginationInstanceStartupCount; /** * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`. */ - parallel_load_count?: PaginationInstanceParallelLoadCount; /** * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`. */ - place_maker_before_content?: boolean; /** * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds. */ - min_wait_time?: PaginationInstanceMinWaitTime; /** * If set to `true`, all pagination bar buttons are disabled. */ - disabled?: boolean; /** * If set to `true`, an overlaying skeleton with animation will be shown. */ - skeleton?: SkeletonShow; /** * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the Infinity Scroller. Defaults to `pagination`. */ - mode?: PaginationInstanceMode; /** * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead. */ - use_load_button?: boolean; items?: PaginationInstanceItems; /** * If set to `true` no indicator will be shown. */ - hide_progress_indicator?: boolean; /** * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode. */ - set_content_handler?: PaginationInstanceSetContentHandler; /** * Callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content. */ - reset_content_handler?: PaginationInstanceResetContentHandler; /** * Callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states. */ - reset_pagination_handler?: PaginationInstanceResetPaginationHandler; /** * Callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown. */ - end_infinity_handler?: PaginationInstanceEndInfinityHandler; /** * By default a `
` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown. */ - page_element?: PaginationInstancePageElement; /** * (infinity mode) is used by the indicator, load more bar as well as by the marker. Defaults to a `div`. */ - fallback_element?: PaginationInstanceFallbackElement; /** * (infinity mode) is used by the internal marker. Falls back to `fallback_element` if not defined. */ - marker_element?: PaginationInstanceMarkerElement; /** * (infinity mode) is used by the indicator. Falls back to `fallback_element` if not defined. */ - indicator_element?: PaginationInstanceIndicatorElement; /** * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`. */ - align?: string; /** * The title used in every button shown in the bar. Defaults to `Side %s`. */ - button_title?: string; /** * The title used in the previous page button. Defaults to `Forrige side`. */ - prev_title?: string; /** * The title used in the next page button. Defaults to `Neste side`. */ - next_title?: string; /** * The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`. */ - more_pages?: string; /** * Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`. */ - is_loading_text?: string; /** * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`. */ - load_button_text?: string; class?: string; className?: string; /** * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. */ - children?: PaginationInstanceChildren; /** * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details. */ - on_change?: (...args: any[]) => any; /** * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`. */ - on_startup?: (...args: any[]) => any; /** * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details. */ - on_load?: (...args: any[]) => any; /** * Only on "infinity" mode. Will be called once `page_count` is reached or `endInfinity` was called. */ - on_end?: (...args: any[]) => any; } - declare class PaginationInstance extends React.Component< PaginationInstanceProps, any @@ -421,7 +358,6 @@ declare class PaginationInstance extends React.Component< static defaultProps: object; render(): JSX.Element; } - type InfinityMarkerStartupPage = string | number; type InfinityMarkerCurrentPage = string | number; type InfinityMarkerPageCount = string | number; @@ -466,160 +402,129 @@ interface InfinityMarkerProps extends SpacingProps { /** * The page shown at the moment the component renders. Defaults to `1`. */ - current_page?: InfinityMarkerCurrentPage; /** * The total pages count. Defaults to `1`. */ - page_count?: InfinityMarkerPageCount; /** * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`. */ - startup_count?: InfinityMarkerStartupCount; /** * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`. */ - parallel_load_count?: InfinityMarkerParallelLoadCount; /** * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`. */ - place_maker_before_content?: boolean; /** * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds. */ - min_wait_time?: InfinityMarkerMinWaitTime; /** * If set to `true`, all pagination bar buttons are disabled. */ - disabled?: boolean; /** * If set to `true`, an overlaying skeleton with animation will be shown. */ - skeleton?: SkeletonShow; /** * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the Infinity Scroller. Defaults to `pagination`. */ - mode?: InfinityMarkerMode; /** * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead. */ - use_load_button?: boolean; items?: InfinityMarkerItems; /** * If set to `true` no indicator will be shown. */ - hide_progress_indicator?: boolean; /** * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode. */ - set_content_handler?: InfinityMarkerSetContentHandler; /** * Callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content. */ - reset_content_handler?: InfinityMarkerResetContentHandler; /** * Callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states. */ - reset_pagination_handler?: InfinityMarkerResetPaginationHandler; /** * Callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown. */ - end_infinity_handler?: InfinityMarkerEndInfinityHandler; /** * By default a `
` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown. */ - page_element?: InfinityMarkerPageElement; /** * (infinity mode) is used by the indicator, load more bar as well as by the marker. Defaults to a `div`. */ - fallback_element?: InfinityMarkerFallbackElement; /** * (infinity mode) is used by the internal marker. Falls back to `fallback_element` if not defined. */ - marker_element?: InfinityMarkerMarkerElement; /** * (infinity mode) is used by the indicator. Falls back to `fallback_element` if not defined. */ - indicator_element?: InfinityMarkerIndicatorElement; /** * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`. */ - align?: string; /** * The title used in every button shown in the bar. Defaults to `Side %s`. */ - button_title?: string; /** * The title used in the previous page button. Defaults to `Forrige side`. */ - prev_title?: string; /** * The title used in the next page button. Defaults to `Neste side`. */ - next_title?: string; /** * The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`. */ - more_pages?: string; /** * Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`. */ - is_loading_text?: string; /** * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`. */ - load_button_text?: string; class?: string; className?: string; /** * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. */ - children?: InfinityMarkerChildren; /** * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details. */ - on_change?: (...args: any[]) => any; /** * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`. */ - on_startup?: (...args: any[]) => any; /** * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details. */ - on_load?: (...args: any[]) => any; /** * Only on "infinity" mode. Will be called once `page_count` is reached or `endInfinity` was called. */ - on_end?: (...args: any[]) => any; } export class InfinityMarker extends React.Component< diff --git a/packages/dnb-eufemia/src/components/pagination/PaginationProvider.d.ts b/packages/dnb-eufemia/src/components/pagination/PaginationProvider.d.ts index ec3b05dcc93..a530fa6cb8e 100644 --- a/packages/dnb-eufemia/src/components/pagination/PaginationProvider.d.ts +++ b/packages/dnb-eufemia/src/components/pagination/PaginationProvider.d.ts @@ -31,7 +31,6 @@ interface PaginationProviderProps /** * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. */ - children?: PaginationProviderChildren; } export default class PaginationProvider extends React.Component< diff --git a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.d.ts b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.d.ts index 79c7b209161..c18cf9613ec 100644 --- a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.d.ts +++ b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.d.ts @@ -19,53 +19,43 @@ export interface ProgressIndicatorProps * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`. */ visible?: boolean; - /** * Defines the "type" of progress, like `circular` or `linear`. Defaults to `circular`. */ type?: ProgressIndicatorType; - /** * Disables the fade-in and fade-out animation. Defaults to `false`. */ no_animation?: boolean; - /** * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`. */ size?: ProgressIndicatorSize; - /** * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`. */ progress?: ProgressIndicatorProgress; - /** * Show a custom label to the right or under the indicator. */ label?: React.ReactNode; - /** * Set it to `vertical` if you want the label to be placed under the indicator. Defaults to `horizontal`. */ label_direction?: string; - /** * If set to `true` a default label will be shown. */ show_label?: boolean; indicator_label?: string; - /** * To enable the visual helper `.dnb-section` class. Use a supported modifier from the Section component. Defaults to `null`. */ section_style?: SectionStyleTypes; - /** * To modify the `spacing`. Use a supported modifier from the Section component. Defaults to `null`. */ section_spacing?: SectionSpacing; - /** * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent. */ @@ -73,7 +63,6 @@ export interface ProgressIndicatorProps class?: string; className?: string; children?: ProgressIndicatorChildren; - /** * Will be called once it's no longer `visible`. */ diff --git a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.d.ts b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.d.ts index 93526717475..0183eda71a4 100644 --- a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.d.ts +++ b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.d.ts @@ -6,13 +6,11 @@ export interface ProgressIndicatorCircularProps * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`. */ size?: string; - /** * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`. */ visible?: boolean; complete?: boolean; - /** * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`. */ @@ -20,7 +18,6 @@ export interface ProgressIndicatorCircularProps maxOffset?: number; onComplete?: (...args: any[]) => any; callOnCompleteHandler?: (...args: any[]) => any; - /** * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent. */ diff --git a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.d.ts b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.d.ts index de32aeb2e94..35a38d9692a 100644 --- a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.d.ts +++ b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.d.ts @@ -6,20 +6,17 @@ export interface ProgressIndicatorLinearProps * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`. */ size?: string; - /** * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`. */ visible?: boolean; complete?: boolean; - /** * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`. */ progress?: ProgressIndicatorLinearProgress; onComplete?: (...args: any[]) => any; callOnCompleteHandler?: (...args: any[]) => any; - /** * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent. */ diff --git a/packages/dnb-eufemia/src/components/radio/Radio.d.ts b/packages/dnb-eufemia/src/components/radio/Radio.d.ts index 2d1513d391a..5e96e852f93 100644 --- a/packages/dnb-eufemia/src/components/radio/Radio.d.ts +++ b/packages/dnb-eufemia/src/components/radio/Radio.d.ts @@ -27,17 +27,14 @@ export interface RadioProps * Use either the `label` property or provide a custom one. */ label?: RadioLabel; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. */ label_position?: RadioLabelPosition; - /** * Determine whether the radio is checked or not. Default will be `false`. */ @@ -45,39 +42,32 @@ export interface RadioProps disabled?: boolean; id?: string; element?: React.ReactNode; - /** * Use a unique group identifier to define the Radio buttons that belongs together. */ group?: string; - /** * The size of the Radio button. For now there is "medium" (default) and "large". */ size?: RadioSize; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: RadioStatusNoAnimation; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; suffix?: RadioSuffix; - /** * (required) defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup". */ @@ -88,7 +78,6 @@ export interface RadioProps class?: string; className?: string; children?: RadioChildren; - /** * Will be called on state changes made by the user. Returns an object `{ checked, value, event }`. */ diff --git a/packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts b/packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts index 168c622a800..db2205e6ea9 100644 --- a/packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts +++ b/packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts @@ -28,12 +28,10 @@ export interface RadioGroupProps */ label?: FormLabelText; label_direction?: FormLabelLabelDirection; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. */ @@ -44,28 +42,23 @@ export interface RadioGroupProps skeleton?: SkeletonShow; id?: string; name?: string; - /** * The size of the Radio button. For now there is "medium" (default) and "large". */ size?: RadioGroupSize; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: FormStatusProps; status_no_animation?: boolean; - /** * The configuration used for the target GlobalStatus. */ @@ -73,7 +66,6 @@ export interface RadioGroupProps suffix?: RadioGroupSuffix; layout_direction?: RadioGroupLayoutDirection; vertical?: boolean; - /** * (required) defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup". */ @@ -82,7 +74,6 @@ export interface RadioGroupProps class?: string; className?: string; children?: RadioGroupChildren; - /** * Will be called on state changes made by the user. Returns an object `{ checked, value, event }`. */ diff --git a/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts b/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts index 85f2044e47b..b277b211d6d 100644 --- a/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts +++ b/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts @@ -16,27 +16,22 @@ export interface SkeletonProps * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`. */ show?: boolean; - /** * Use `true` to disable the animation. */ no_animation?: boolean; - /** * Define a figure to use, like `article`. The wrapped content will be hidden while the skeleton figure is shown. */ figure?: SkeletonFigure; - /** * Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed. */ aria_busy?: string; - /** * Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed. */ aria_ready?: string; - /** * Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`. */ diff --git a/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts b/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts index 9746cf97d0a..ac45c7cc2a7 100644 --- a/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts +++ b/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts @@ -20,7 +20,7 @@ export interface SkeletonContextProps { }; } export type SkeletonMethods = 'shape' | 'font' | 'code'; -export const createSkeletonClass: ( +export declare const createSkeletonClass: ( method: SkeletonMethods, skeleton: SkeletonShow, context?: SkeletonContextProps @@ -35,7 +35,7 @@ export interface skeletonDOMAttributesContext { }; }; } -export const skeletonDOMAttributes: ( +export declare const skeletonDOMAttributes: ( params: React.HTMLProps, skeleton: SkeletonShow, context?: SkeletonContextProps diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.d.ts b/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.d.ts index 18450d62687..83cd403a078 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.d.ts +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.d.ts @@ -29,17 +29,14 @@ export interface StepIndicatorProps * (required) a unique string-based ID in order to bind together the main component and the sidebar (``). Both have to get the same ID. */ sidebar_id?: string; - /** * (required) defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely. */ mode?: StepIndicatorMode; - /** * (required) defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above. */ data?: StepIndicatorData; - /** * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`. */ @@ -47,22 +44,18 @@ export interface StepIndicatorProps overview_title?: string; step_title_extended?: string; step_title?: string; - /** * Defines the active number marked step starting by 0. Defaults to `0`. */ current_step?: StepIndicatorCurrentStep; - /** * Define whether to show automatically counted numbers or not. Defaults to `false`. */ hide_numbers?: boolean; - /** * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`. */ on_item_render?: (...args: any[]) => any; - /** * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`. */ @@ -71,7 +64,6 @@ export interface StepIndicatorProps class?: string; className?: string; children?: StepIndicatorChildren; - /** * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`. */ diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.d.ts b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.d.ts index bf4cbb16881..687ae6c2c5a 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.d.ts +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.d.ts @@ -10,23 +10,19 @@ export interface StepIndicatorItemProps mode?: string; title: StepIndicatorItemTitle; step_title?: string; - /** * Define whether to show automatically counted numbers or not. Defaults to `false`. */ hide_numbers?: boolean; - /** * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`. */ on_item_render?: (...args: any[]) => any; - /** * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`. */ on_change?: (...args: any[]) => any; on_render?: (...args: any[]) => any; - /** * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`. */ @@ -52,15 +48,14 @@ export interface StepItemButtonProps { status?: FormStatusText; status_state?: StepIndicatorStatusState; } -export const StepItemButton: React.FC; +export declare const StepItemButton: React.FC; export interface StepItemWrapperProps { children?: React.ReactNode; number?: number; - /** * Define whether to show automatically counted numbers or not. Defaults to `false`. */ hide_numbers?: boolean; status?: string; } -export const StepItemWrapper: React.FC; +export declare const StepItemWrapper: React.FC; diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.d.ts b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.d.ts index b11042d56b5..c0dd8f44ed0 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.d.ts +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.d.ts @@ -7,7 +7,6 @@ export interface StepIndicatorSidebarProps Omit, 'ref'> { internalId?: string; showInitialData?: boolean; - /** * (required) a unique string-based ID in order to bind together the main component and the sidebar (``). Both have to get the same ID. */ diff --git a/packages/dnb-eufemia/src/components/switch/Switch.d.ts b/packages/dnb-eufemia/src/components/switch/Switch.d.ts index f5c767eb375..361bc8722d7 100644 --- a/packages/dnb-eufemia/src/components/switch/Switch.d.ts +++ b/packages/dnb-eufemia/src/components/switch/Switch.d.ts @@ -22,55 +22,45 @@ export interface SwitchProps * Use either the `label` property or provide a custom one. */ label?: SwitchLabel; - /** * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. */ label_position?: SwitchLabelPosition; - /** * Use `true` to make the label only readable by screen readers. */ label_sr_only?: boolean; - /** * (required) the `title` of the input - describing it a bit further for accessibility reasons. */ title?: string; - /** * Determine whether the switch is checked or not. The default will be `false`. */ checked?: boolean; disabled?: boolean; id?: string; - /** * The size of the switch. For now there is "medium" (default) and "large". */ size?: SwitchSize; - /** * 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. */ status?: FormStatusText; - /** * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */ status_state?: FormStatusState; - /** * Use an object to define additional FormStatus properties. */ status_props?: Record; - /** * The configuration used for the target GlobalStatus. */ globalStatus?: GlobalStatusConfigObject; status_no_animation?: boolean; - /** * Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component. */ @@ -78,7 +68,6 @@ export interface SwitchProps value?: string; attributes?: SwitchAttributes; readOnly?: boolean; - /** * If set to `true`, an overlaying skeleton with animation will be shown. */ @@ -86,12 +75,10 @@ export interface SwitchProps class?: string; className?: string; children?: SwitchChildren; - /** * Will be called on state changes made by the user. Returns a boolean `{ checked, event }`. */ on_change?: (...args: any[]) => any; - /** * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`. */ diff --git a/packages/dnb-eufemia/src/components/tabs/Tabs.d.ts b/packages/dnb-eufemia/src/components/tabs/Tabs.d.ts index 9afcca8e606..fc399145769 100644 --- a/packages/dnb-eufemia/src/components/tabs/Tabs.d.ts +++ b/packages/dnb-eufemia/src/components/tabs/Tabs.d.ts @@ -34,74 +34,60 @@ export interface TabsProps * (required) defines the data structure to load as a JSON. e.g. `[{title: '...', content: 'Current tab', key: '...', hash: '...'}]` */ data?: TabsData; - /** * (required) the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`. */ content?: TabsContent; - /** * To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the Section component. Defaults to `null`. */ content_style?: SectionStyleTypes; - /** * To modify the `spacing` onto the content wrapper. Use a supported modifier from the Section component. Defaults to `large`. */ content_spacing?: SectionSpacing; label?: string; - /** * Define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: 'url', ... }]}`). Defaults to `