@dnb/eufemia 9.27.0 → 9.28.0

package/cjs/components/slider/Slider.d.ts

@@ -1,231 +1,148 @@
-import * as React from 'react';
-export type SliderLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type SliderLabelDirection = 'horizontal' | 'vertical';
-export type SliderLabelSrOnly = string | boolean;
-export type SliderStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type SliderStatusNoAnimation = string | boolean;
-export type SliderSuffix =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type SliderMin = string | number;
-export type SliderMax = string | number;
-export type SliderValue = string | number;
-export type SliderStep = string | number;
-export type SliderVertical = string | boolean;
-export type SliderReverse = string | boolean;
-export type SliderStretch = string | boolean;
-export type SliderNumberFormat = string | Object;
-export type SliderDisabled = string | boolean;
-export type SliderHideButtons = string | boolean;
-export type SliderUseScrollwheel = string | boolean;
-export type SliderSkeleton = string | boolean;
-export type SliderSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type SliderTop = string | number | boolean;
-export type SliderRight = string | number | boolean;
-export type SliderBottom = string | number | boolean;
-export type SliderLeft = string | number | boolean;
-export type SliderChildren = string | ((...args: any[]) => any);
-
 /**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ * Web Slider Component
+ *
  */
-export interface SliderProps extends React.HTMLProps<HTMLElement> {
-  id?: string;
-
-  /**
-   * Prepends the Form Label component. If no ID is provided, a random ID is created.
-   */
-  label?: SliderLabel;
-
-  /**
-   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
-   */
-  label_direction?: SliderLabelDirection;
-
-  /**
-   * Use `true` to make the label only readable by screen readers.
-   */
-  label_sr_only?: SliderLabelSrOnly;
-
-  /**
-   * 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?: SliderStatus;
-
-  /**
-   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
-   */
-  status_state?: string;
-
-  /**
-   * Use an object to define additional FormStatus properties.
-   */
-  status_props?: Object;
-  status_no_animation?: SliderStatusNoAnimation;
-
-  /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
-   */
-  global_status_id?: string;
-
-  /**
-   * Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.
-   */
-  suffix?: SliderSuffix;
-
-  /**
-   * Give the slider thump button a title for accessibility reasons. Defaults to `null`.
-   */
-  thump_title?: string;
-
-  /**
-   * Give the add button a title for accessibility reasons. Defaults to `+`.
-   */
-  add_title?: string;
-
-  /**
-   * Give the subtract button a title for accessibility reasons. Defaults to `−`.
-   */
-  subtract_title?: string;
-
-  /**
-   * The minimum value. Defaults to `0`.
-   */
-  min?: SliderMin;
-
-  /**
-   * The maximum value. Defaults to `100`
-   */
-  max?: SliderMax;
-
-  /**
-   * <em>(required)</em> the `value` of the slider. Also the event callback result.
-   */
-  value?: SliderValue;
-
-  /**
-   * The steps the slider takes on changing the value. Defaults to `null`
-   */
-  step?: SliderStep;
-
-  /**
-   * Show the slider vertically. Defaults to `false`.
-   */
-  vertical?: SliderVertical;
-
-  /**
-   * Show the slider reversed. Defaults to `false`.
-   */
-  reverse?: SliderReverse;
-
-  /**
-   * If set to `true`, then the slider will be 100% in `width`.
-   */
-  stretch?: SliderStretch;
-
-  /**
-   * Will extend the return object with a `number` property (from `on_change` event). You can use all the options from the <a href="/uilib/components/number-format/properties">NumberFormat</a> component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `number_format={{ currency: true, decimals: 0 }}`
-   */
-  number_format?: SliderNumberFormat;
-  disabled?: SliderDisabled;
-
-  /**
-   * Removes the helper buttons. Defaults to `false`.
-   */
-  hide_buttons?: SliderHideButtons;
-
-  /**
-   * Enable mouse scroll-wheel support. Defaults to `false`.
-   */
-  use_scrollwheel?: SliderUseScrollwheel;
-
-  /**
-   * If set to `true`, an overlaying skeleton with animation will be shown.
-   */
-  skeleton?: SliderSkeleton;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: SliderSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: SliderTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: SliderRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: SliderBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: SliderLeft;
-  class?: string;
-  className?: string;
-  children?: SliderChildren;
-
-  /**
-   * Will be called once the component is ready to use. The callback `value` is a number `{ value }`.
-   */
-  on_init?: (...args: any[]) => any;
-
-  /**
-   * Will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `number_format` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.
-   */
-  on_change?: (...args: any[]) => any;
-
-  /**
-   * Will be called once the user stops dragging. Returns `{ event }`.
-   */
-  on_drag_start?: (...args: any[]) => any;
-
-  /**
-   * Will be called once the user starts dragging. Returns `{ event }`.
-   */
-  on_drag_end?: (...args: any[]) => any;
-  on_state_update?: (...args: any[]) => any;
-}
-export default class Slider extends React.Component<SliderProps, any> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+import React from 'react';
+import type { IncludeCamelCase } from '../../shared/helpers/withCamelCaseProps';
+import type { ISpacingProps } from '../../shared/interfaces';
+import type { SuffixChildren } from '../../shared/helpers/Suffix';
+import type { formatReturnType, formatOptionParams } from '../number-format/NumberUtils';
+declare type onChangeEventProps = {
+    value: number;
+    rawValue: number;
+    number?: formatReturnType | null;
+    event?: Event;
+    /** @deprecated use rawValue instead */
+    raw_value?: number;
+};
+export declare type SliderProps = {
+    id?: string;
+    label?: React.ReactNode;
+    label_direction?: 'vertical' | 'horizontal';
+    label_sr_only?: boolean;
+    status?: string | boolean;
+    status_state?: 'error' | 'info';
+    status_props?: Record<string, unknown>;
+    status_no_animation?: boolean;
+    global_status_id?: string;
+    suffix?: SuffixChildren;
+    thumb_title?: string;
+    add_title?: string;
+    subtract_title?: string;
+    min?: number;
+    max?: number;
+    value?: number;
+    step?: number;
+    vertical?: boolean;
+    reverse?: boolean;
+    stretch?: boolean;
+    number_format?: formatOptionParams;
+    disabled?: boolean;
+    hide_buttons?: boolean;
+    skeleton?: boolean;
+    class?: string;
+    className?: string;
+    on_change?: (props: onChangeEventProps) => void;
+    on_drag_start?: (props: {
+        event: MouseEvent | TouchEvent;
+    }) => void;
+    on_drag_end?: (props: {
+        event: MouseEvent | TouchEvent;
+    }) => void;
+    /** @deprecated */
+    on_init?: (props: Omit<onChangeEventProps, 'rawValue'>) => void;
+    /** @deprecated The Slider does not support mouse wheel  */
+    use_scrollwheel?: boolean;
+} & ISpacingProps;
+declare function Slider(localProps: IncludeCamelCase<SliderProps>): JSX.Element;
+export { Slider as OriginalComponent };
+declare const _default: React.FunctionComponent<Partial<SliderProps> & Partial<{
+    id?: string;
+    label?: boolean | React.ReactText | {
+        type: string | {} | {};
+        props: any;
+        key: React.Key;
+    } | {} | {} | {
+        key: React.Key;
+        children: boolean | React.ReactText | {
+            type: string | {} | {};
+            props: any;
+            key: React.Key;
+        } | {} | {} | any;
+        type: string | {} | {};
+        props: any;
+    };
+    labelDirection?: "horizontal" | "vertical";
+    labelSrOnly?: boolean;
+    status?: string | boolean;
+    statusState?: "error" | "info";
+    statusProps?: {
+        [x: string]: unknown;
+    };
+    statusNoAnimation?: boolean;
+    globalStatusId?: string;
+    suffix?: boolean | React.ReactText | {
+        type: string | {} | {};
+        props: any;
+        key: React.Key;
+    } | {} | {} | {
+        key: React.Key;
+        children: boolean | React.ReactText | {
+            type: string | {} | {};
+            props: any;
+            key: React.Key;
+        } | {} | {} | any;
+        type: string | {} | {};
+        props: any;
+    };
+    thumbTitle?: string;
+    addTitle?: string;
+    subtractTitle?: string;
+    min?: number;
+    max?: number;
+    value?: number;
+    step?: number;
+    vertical?: boolean;
+    reverse?: boolean;
+    stretch?: boolean;
+    numberFormat?: {
+        locale?: string;
+        clean?: boolean;
+        compact?: boolean | "short" | "long";
+        decimals?: number;
+        omitRounding?: boolean;
+        phone?: boolean;
+        org?: boolean;
+        ban?: boolean;
+        nin?: boolean;
+        percent?: boolean;
+        currency?: string | boolean;
+        currencyDisplay?: boolean | "" | "symbol" | "code" | "name" | "narrowSymbol";
+        currencyPosition?: import("../number-format/NumberUtils").formatCurrencyPosition;
+        omitCurrencySign?: boolean;
+        cleanCopyValue?: boolean;
+        options?: object;
+        returnAria?: boolean;
+    };
+    disabled?: boolean;
+    hideButtons?: boolean;
+    skeleton?: boolean;
+    class?: string;
+    className?: string;
+    onChange?: {};
+    onDragStart?: {};
+    onDragEnd?: {};
+    onInit?: {};
+    useScrollwheel?: boolean;
+    space?: import("../../shared/interfaces").SpaceTypes | {
+        top?: import("../../shared/interfaces").SpaceTypes;
+        right?: import("../../shared/interfaces").SpaceTypes;
+        bottom?: import("../../shared/interfaces").SpaceTypes;
+        left?: import("../../shared/interfaces").SpaceTypes;
+    };
+    top?: import("../../shared/interfaces").SpaceTypes;
+    right?: import("../../shared/interfaces").SpaceTypes;
+    bottom?: import("../../shared/interfaces").SpaceTypes;
+    left?: import("../../shared/interfaces").SpaceTypes;
+}>> & typeof Slider;
+export default _default;