@dxc-technology/halstack-react 0.0.0-ee92231 → 0.0.0-efa7c74

package/wizard/types.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type Step = {
+    /**
+     * Step label.
+     */
+    label: string;
+    /**
+     * Description that will be placed next to the step.
+     */
+    description?: string;
+    /**
+     * Element used as the icon to be displayed in the step.
+     */
+    icon?: SVG;
+    /**
+     * @deprecated URL of the icon to be displayed in the step.
+     */
+    iconSrc?: string;
+    /**
+     * Whether the step is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the step is valid or not.
+     */
+    valid?: boolean;
+};
+declare type Props = {
+    /**
+     * The wizard can be showed in horizontal or vertical.
+     */
+    mode?: "horizontal" | "vertical";
+    /**
+     * Defines which step is marked as the current. The numeration starts in 0.
+     */
+    currentStep?: number;
+    /**
+     * This function will be called when the user clicks a step. The step
+     * number will be passed as a parameter.
+     */
+    onStepClick?: (newCurrentStep: number) => void;
+    /**
+     * An array of objects representing the steps.
+     */
+    steps: [Step, ...Step[]];
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex attribute that is given to all the steps.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/wizard/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/file-input/index.d.ts

@@ -1,81 +0,0 @@
-type Size = "small" | "medium" | "large" | "fillParent";
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-type FileData = {
-  error?: string;
-  file?: File;
-  preview?: string;
-};
-
-type Props = {
-  /**
-   * Name attribute of the file input element.
-   */
-  name?: string;
-  /**
-   * Text to be placed above the file input.
-   */
-  label?: string;
-  /**
-   * Uses one of the available file input modes:
-   *    'file': Files are selected by clicking the button and selecting it through the file explorer.
-   *    'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
-   *    'dropzone':  Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area. 
-   *     The drag and drop area of this mode is bigger than the one of the filedrop mode.
-   */
-   mode?: "file" | "filedrop" | "dropzone";
-  /**
-   * Helper text to be placed above the file input.
-   */
-  helperText?: string;
-  /**
-   * Defines the file types accepted by the component. It is not possible to select a file with a non valid type.
-   */
-  accept?: string;
-  /**
-   * An array of FileData representing the selected files. 
-   */
-  value?: FileData[];
-  /**
-   * Minimum file size allowed (in bytes). If the file size does not comply the minSize, an error will be passed to the FileData.
-   */
-   minSize?: number;
-  /**
-   * Maximum file size allowed (in bytes). If the file size does not comply the maxSize, an error will be passed to the FileData.
-   */
-   maxSize?: number;
-  /**
-   * If true and if the file is an image, a preview of it will be shown. If it is not an image, an icon refering to the file's type will be shown. 
-   * If mode is not multiple and there is one file already selected, the file will be replaced by the last selected one.
-   */
-   showPreview?: boolean;
-  /**
-   * If true, more than one file can be selected. If false, only one file can be selected.
-   */
-   multiple?: boolean;
-  /**
-   * If true, the component will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * This function will be called when the user selects or drops a file. The list of files will be sent as a parameter.
-   * In this function, the files can be updated or returned as they come. These files must be passed to the value in order to be shown.
-   */
-  callbackFile?: (files: FileData[]) => void;
-  /**
-   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-   */
-  margin?: Space | Margin;
-  /**
-   * Value of the tabindex attribute.
-   */
-  tabIndex?: number;
-};
-
-export default function DxcFileInput(props: Props): JSX.Element;

package/heading/index.d.ts

@@ -1,17 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  level?: 1 | 2 | 3 | 4 | 5;
-  text?: string;
-  as?: "h1" | "h2" | "h3" | "h4" | "h5";
-  weight?: "light" | "normal" | "bold";
-  margin?: Space | Margin;
-};
-
-export default function DxcHeading(props: Props): JSX.Element;

package/number-input/index.d.ts

@@ -1,113 +0,0 @@
-type Size = "small" | "medium" | "large" | "fillParent";
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-type Props = {
-  /**
-   * Text to be placed above the number.
-   */
-  label?: string;
-  /**
-   * Name attribute of the input element.
-   */
-  name?: string;
-  /**
-   * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
-   */
-  value?: string;
-  /**
-   * Helper text to be placed above the number.
-   */
-  helperText?: string;
-  /**
-   * Text to be put as placeholder of the number.
-   */
-  placeholder?: string;
-  /**
-   * If true, the component will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * If true, the number will be optional, showing '(Optional)'
-   * next to the label. Otherwise, the field will be considered required
-   * and an error will be passed as a parameter to the OnBlur and onChange
-   * functions when it has not been filled.
-   */
-  optional?: boolean;
-  /**
-   * Prefix to be placed before the number value.
-   */
-  prefix?: string;
-  /**
-   * Suffix to be placed after the number value.
-   */
-  suffix?: string;
-  /**
-   * Minimum value allowed by the number input. If the typed value by the user is
-   * lower than min, the onBlur and onChange functions will be called with
-   * the current value and an internal error informing that the current
-   * value is not correct. If a valid state is reached, the error parameter
-   * will be null in both events.
-   */
-  min?: number;
-  /**
-   * Maximum value allowed by the number input. If the typed value by the user
-   * surpasses max, the onBlur and onChange functions will be called with
-   * the current value and an internal error informing that the current
-   * value is not correct. If a valid state is reached, the error parameter
-   * will be null in both events.
-   */
-  max?: number;
-  /**
-   * The step interval to use when using the up and down arrows to adjust the value.
-   */
-  step?: number;
-  /**
-   * This function will be called when the user types within the input
-   * element of the component. An object including the current value and
-   * the error (if the value entered is not valid) will be passed to this
-   * function. If there is no error, error will be null.
-   */
-  onChange?: (val: { value: string; error: string }) => void;
-  /**
-   * This function will be called when the input element loses the focus.
-   * An object including the input value and the error (if the value
-   * entered is not valid) will be passed to this function. If there is no error, 
-   * error will be null.
-   */
-  onBlur?: (val: { value: string; error: string }) => void;
-  /**
-   * If it is defined, the component will change its appearance, showing
-   * the error below the input component. If it is not defined, the error
-   * messages will be managed internally, but never displayed on its own.
-   */
-  error?: string;
-  /**
-   * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value. 
-   * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
-   */
-  autocomplete?: string;
-  /**
-   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). 
-   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-   */
-  margin?: Space | Margin;
-  /**
-   * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
-   */
-   size?: Size;
-   /**
-    * Value of the tabindex attribute.
-    */
-   tabIndex?: number;
-   /**
-    * Reference to the component.
-    */
-   ref?: React.RefObject<HTMLDivElement>;
-};
-
-export default function DxcNumberInput(props: Props): JSX.Element;

package/resultsetTable/index.d.ts

@@ -1,19 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  columns?: any;
-  rows?: any;
-  itemsPerPage?: number;
-  itemsPerPageOptions?: number[];
-  itemsPerPageFunction?: void,
-  margin?: Space | Margin;
-  tabIndex?: number;
-};
-
-export default function DxcResultsetTable(props: Props): JSX.Element;

package/sidenav/index.d.ts

@@ -1,13 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Padding = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  padding?: Space | Padding;
-};
-
-export default function DxcSidenav(props: Props): JSX.Element;

package/tag/index.d.ts

@@ -1,24 +0,0 @@
-type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  icon?: any;
-  iconSrc?: string;
-  label?: string;
-  linkHref?: string;
-  onClick?: void,
-  iconBgColor?: string;
-  labelPosition?: "before" | "after";
-  newWindow?: boolean;
-  margin?: Space | Margin;
-  size?: Size;
-  tabIndex?: number;
-};
-
-export default function DxcTag(props: Props): JSX.Element;

package/text-input/index.d.ts

@@ -1,135 +0,0 @@
-type Size = "small" | "medium" | "large" | "fillParent";
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-type Action = {
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  icon: string | SVG;
-};
-
-type Props = {
-  /**
-   * Text to be placed above the input. This label will be used as the aria-label attribute of the list of suggestions.
-   */
-  label?: string;
-  /**
-   * Name attribute of the input element.
-   */
-  name?: string;
-  /**
-   * Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
-   */
-  value?: string;
-  /**
-   * Helper text to be placed above the input.
-   */
-  helperText?: string;
-  /**
-   * Text to be put as placeholder of the input.
-   */
-  placeholder?: string;
-  /**
-   * Action to be shown in the input. This is an object composed of an onClick function and an icon,
-   * being the latter either an inline svg or a URL to the image.
-   */
-  action?: Action;
-  /**
-   * If true, the input will have an action to clear the entered value.
-   */
-  clearable?: boolean;
-  /**
-   * If true, the component will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * If true, the input will be optional, showing '(Optional)'
-   * next to the label. Otherwise, the field will be considered required and an error will be
-   * passed as a parameter to the OnBlur and onChange functions when it has
-   * not been filled.
-   */
-  optional?: boolean;
-  /**
-   * Prefix to be placed before the input value.
-   */
-  prefix?: string;
-  /**
-   * Suffix to be placed after the input value.
-   */
-  suffix?: string;
-  /**
-   * This function will be called when the user types within the input
-   * element of the component. An object including the current value and
-   * the error (if the value entered is not valid) will be passed to this
-   * function. If there is no error, error will be null.
-   */
-  onChange?: (val: { value: string; error: string }) => void;
-  /**
-   * This function will be called when the input element loses the focus.
-   * An object including the input value and the error (if the value
-   * entered is not valid) will be passed to this function. If there is no error, 
-   * error will be null.
-   */
-  onBlur?: (obj: { value: string; error: string }) => void;
-  /**
-   * If it is defined, the component will change its appearance, showing
-   * the error below the input component. If it is not defined, the error
-   * messages will be managed internally, but never displayed on its own.
-   */
-  error?: string;
-  /**
-   * These are the options to be displayed as suggestions. It can be either an array or a function:
-   *    - Array:    Array of options that will be filtered by the component.
-   *    - Function: This function will be called when the user changes the value, we will send as a parameter the new value;
-   *                apart from that this function should return one promise on which we should make 'then' to get the suggestions filtered.
-   */
-  suggestions?: string[] | (() => void);
-  /**
-    * Regular expression that defines the valid format allowed by the input.
-    * This will be checked both when the input element loses the focus and
-    * while typing within it. If the string entered does not match the
-    * pattern, the onBlur and onChange functions will be called with the
-    * current value and an internal error informing that this value does not
-    * match the pattern. If the pattern is met, the error parameter of both
-    * events will be null.
-   */
-  pattern?: string;
-  /**
-    * Specifies the minimun and maximum length allowed by the input. 
-    * This will be checked both when the input element loses the
-    * focus and while typing within it. If the string entered does not
-    * comply the length, the onBlur and onChange functions will be called
-    * with the current value and an internal error informing that the value
-    * length does not comply the specified range. If a valid length is
-    * reached, the error parameter of both events will be null.
-   */
-  length?: { min?: number; max?: number };
-  /**
-   * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
-   * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
-   */
-  autocomplete?: string;
-  /**
-   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-   */
-  margin?: Space | Margin;
-  /**
-   * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
-   */
-  size?: Size;
-  /**
-   * Value of the tabindex attribute.
-   */
-  tabIndex?: number;
-  /**
-   * Reference to the component.
-   */
-  ref?: React.RefObject<HTMLDivElement>;
-};
-
-export default function DxcTextInput(props: Props): JSX.Element;

package/toggle-group/index.d.ts

@@ -1,21 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  label?: string;
-  helperText?: string;
-  value?: any;
-  onChange?: void;
-  disabled?: boolean;
-  options?: any;
-  multiple?: boolean;
-  margin?: Space | Margin;
-  tabIndex?: number;
-};
-
-export default function DxcToggleGroup(props: Props): JSX.Element;

package/wizard/index.d.ts

@@ -1,18 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  mode?: "horizontal" | "vertical";
-  currentStep?: number;
-  onStepClick?: void;
-  steps?: any;
-  margin?: Space | Margin;
-  tabIndex?: number;
-};
-
-export default function DxcWizard(props: Props): JSX.Element;