@dxc-technology/halstack-react 0.0.0-dfcca07 → 0.0.0-dfd09f9

package/dropdown/Dropdown.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -35,7 +35,7 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
@@ -48,8 +48,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
       _ref$optionsIconPosit = _ref.optionsIconPosition,
       optionsIconPosition = _ref$optionsIconPosit === void 0 ? "before" : _ref$optionsIconPosit,
       icon = _ref.icon,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
       _ref$label = _ref.label,
@@ -164,15 +162,13 @@ var DxcDropdown = function DxcDropdown(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(DropdownTriggerContainer, {
     iconPosition: iconPosition,
     caretHidden: caretHidden
-  }, icon ? /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
+  }, icon && /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
     label: label,
     iconPosition: iconPosition,
     disabled: disabled
-  }, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
-    label: label,
-    src: iconSrc,
-    iconPosition: iconPosition
-  }), /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
+    src: icon
+  }) : icon), /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
     iconPosition: iconPosition,
     label: label
   }, label)), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
@@ -213,14 +209,12 @@ var DxcDropdown = function DxcDropdown(_ref) {
         onClick: function onClick(event) {
           return handleMenuItemClick(option);
         }
-      }, option.icon ? /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
-        label: option.label,
-        iconPosition: optionsIconPosition
-      }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : /*#__PURE__*/_react["default"].createElement(option.icon)) : option.iconSrc && /*#__PURE__*/_react["default"].createElement(ListIcon, {
+      }, option.icon && /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
         label: option.label,
-        src: option.iconSrc,
         iconPosition: optionsIconPosition
-      }), /*#__PURE__*/_react["default"].createElement("span", {
+      }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ListIcon, {
+        src: option.icon
+      }) : option.icon), /*#__PURE__*/_react["default"].createElement("span", {
         className: "optionLabel"
       }, option.label));
     })))));
@@ -357,15 +351,7 @@ var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject
   return props.caretHidden ? "100%" : "calc(100% - 36px)";
 });
 
-var ButtonIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.buttonIconSize;
-}, function (props) {
-  return props.theme.buttonIconSize;
-}, function (props) {
-  return props.iconPosition === "after" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
-});
+var ButtonIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var ButtonIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.buttonIconSize;
@@ -379,15 +365,7 @@ var ButtonIconContainer = _styledComponents["default"].div(_templateObject7 || (
   return props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor;
 });
 
-var ListIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.optionIconSize;
-}, function (props) {
-  return props.theme.optionIconSize;
-}, function (props) {
-  return props.iconPosition === "after" && props.label !== "" && props.theme.optionIconSpacing || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && props.theme.optionIconSpacing || "0px";
-});
+var ListIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var ListIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.optionIconSize;

package/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,249 @@
+import React from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import DxcDropdown from "./Dropdown";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Dropdown",
+  component: DxcDropdown,
+};
+
+const iconSVG = (
+  <svg viewBox="0 0 24 24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  </svg>
+);
+
+const iconSVGLarge = (
+  <svg enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+    <g>
+      <path d="M0,0h24v24H0V0z" fill="none" />
+      <path d="M0,0h24v24H0V0z" fill="none" />
+    </g>
+    <g>
+      <path d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z" />
+    </g>
+  </svg>
+);
+
+const options: any = [
+  {
+    value: "1",
+    label: "Amazon with a very long text",
+  },
+  {
+    value: "2",
+    label: "Ebay",
+  },
+  {
+    value: "3",
+    label: "Apple",
+  },
+];
+
+const option: any = [
+  {
+    value: "1",
+    label: "Ebay",
+  },
+];
+
+const icons = [
+  iconSVG,
+  iconSVGLarge,
+  "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png",
+];
+
+const optionsIcon: any = options.map((op, i) => ({ ...op, icon: icons[i] }));
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <DxcDropdown label="Default" options={options} onSelectOption={(value) => {}} />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <DxcDropdown label="Hovered" options={options} onSelectOption={(value) => {}} />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus-visible">
+      <Title title="Focused" theme="light" level={4} />
+      <DxcDropdown label="Focused" options={options} onSelectOption={(value) => {}} />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <DxcDropdown label="Actived" options={options} onSelectOption={(value) => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcDropdown label="Disabled" options={options} onSelectOption={(value) => {}} disabled />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Caret hidden" theme="light" level={4} />
+      <DxcDropdown label="Caret hidden" options={options} onSelectOption={(value) => {}} caretHidden />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With icon before" theme="light" level={4} />
+      <DxcDropdown label="Icon before" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With icon after" theme="light" level={4} />
+      <DxcDropdown
+        label="Icon after"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
+        iconPosition="after"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Only icon" theme="light" level={4} />
+      <DxcDropdown options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large icon" theme="light" level={4} />
+      <DxcDropdown label="Large icon" options={options} onSelectOption={(value) => {}} icon={iconSVGLarge} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled with icon" theme="light" level={4} />
+      <DxcDropdown
+        label="Disabled with icon"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon={iconSVG}
+        disabled
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Ellipsis" theme="light" level={4} />
+      <DxcDropdown
+        label="Very long text in dropdown button"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon={iconSVG}
+        size="medium"
+      />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall" theme="light" level={4} />
+      <DxcDropdown label="Xxsmall" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall" theme="light" level={4} />
+      <DxcDropdown label="Xsmall" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcDropdown label="Small" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcDropdown label="Medium" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcDropdown label="Large" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge" theme="light" level={4} />
+      <DxcDropdown label="Xlarge" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge" theme="light" level={4} />
+      <DxcDropdown label="Xxlarge" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcDropdown label="Small" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcDropdown label="Medium" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcDropdown label="Large" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FitContent" theme="light" level={4} />
+      <DxcDropdown
+        label="FitContent"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon={iconSVG}
+        size="fitContent"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FillParent" theme="light" level={4} />
+      <DxcDropdown
+        label="FillParent"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon={iconSVG}
+        size="fillParent"
+      />
+    </ExampleContainer>
+  </>
+);
+
+const DropdownWithOptions = () => (
+  <ExampleContainer expanded>
+    <Title title="Options" theme="light" level={4} />
+    <DxcDropdown label="Options with icon" options={optionsIcon} onSelectOption={(value) => {}} />
+  </ExampleContainer>
+);
+
+const DropdownHoverOption = () => (
+  <ExampleContainer pseudoState="pseudo-hover" expanded>
+    <Title title="Hovered option" theme="light" level={4} />
+    <DxcDropdown label="Hovered options" options={option} onSelectOption={(value) => {}} />
+  </ExampleContainer>
+);
+
+const DropdownActiveOption = () => (
+  <ExampleContainer pseudoState="pseudo-active" expanded>
+    <Title title="Actived option" theme="light" level={4} />
+    <DxcDropdown label="Actived options" options={option} onSelectOption={(value) => {}} />
+  </ExampleContainer>
+);
+
+const DropdownWithOptionsIconAfter = () => (
+  <ExampleContainer expanded>
+    <Title title="Icon after options" theme="light" level={4} />
+    <DxcDropdown
+      label="Icon after options"
+      options={optionsIcon}
+      onSelectOption={(value) => {}}
+      optionsIconPosition="after"
+    />
+  </ExampleContainer>
+);
+
+export const DropdownOptions = DropdownWithOptions.bind({});
+DropdownOptions.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole("button"));
+};
+
+export const DropdownHoveredOption = DropdownHoverOption.bind({});
+DropdownHoveredOption.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole("button"));
+};
+
+export const DropdownActivedOption = DropdownActiveOption.bind({});
+DropdownActivedOption.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole("button"));
+};
+
+export const DropdownOptionsIconAfter = DropdownWithOptionsIconAfter.bind({});
+DropdownOptionsIconAfter.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole("button"));
+};

package/dropdown/Dropdown.test.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+global.document.createRange = function () {
+  return {
+    setStart: function setStart() {},
+    setEnd: function setEnd() {},
+    commonAncestorContainer: {
+      nodeName: "BODY",
+      ownerDocument: document
+    }
+  };
+};
+
+describe("Dropdown component tests", function () {
+  test("Dropdown renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      label: "dropdown-test"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("dropdown-test")).toBeTruthy();
+  });
+  test("Dropdown renders with correct icon before", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      icon: "/testIcon",
+      label: "dropdown-test"
+    })),
+        getAllByRole = _render2.getAllByRole;
+
+    var image = getAllByRole("img")[0];
+    expect(image.getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with correct icon after", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      icon: "/testIcon",
+      iconPosition: "after",
+      label: "dropdown-test"
+    })),
+        getAllByRole = _render3.getAllByRole;
+
+    var image = getAllByRole("img")[0];
+    expect(image.getAttribute("src")).toEqual("/testIcon");
+  });
+  test("onClick shows and hides option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      label: "dropdown-test"
+    })),
+        queryByText = _render4.queryByText;
+
+    var dropdown = queryByText("dropdown-test"); //Before clicked is not showed
+
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(queryByText("option-test")).toBeTruthy();
+  });
+  test("Disabled dropdown is not clickable", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      disabled: true,
+      label: "dropdown-test"
+    })),
+        queryByText = _render5.queryByText;
+
+    var dropdown = queryByText("dropdown-test");
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(queryByText("option-test")).toBeFalsy();
+  });
+  test("Dropdown renders with correct icon before option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test",
+      icon: "/testIcon"
+    }];
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      label: "dropdown-test"
+    })),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(getByRole("img").getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with correct icon after option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test",
+      icon: "/testIcon"
+    }];
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      optionsIconPosition: "after",
+      label: "dropdown-test"
+    })),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(getByRole("img").getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with caret hidden", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      caretHidden: true,
+      label: "dropdown-test"
+    })),
+        queryByRole = _render8.queryByRole;
+
+    expect(queryByRole("img")).toBeFalsy();
+  });
+  test("onSelectOption fuction is called correctly", function () {
+    var onSelectOption = jest.fn(function (i) {
+      return i;
+    });
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      onSelectOption: onSelectOption,
+      label: "dropdown-test"
+    })),
+        getByText = _render9.getByText;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    var option = getByText("option-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(option);
+    });
+    expect(onSelectOption).toHaveBeenCalledWith(1);
+  });
+  test("expandOnHover shows and hides the option correctly", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      expandOnHover: true,
+      label: "dropdown-test"
+    })),
+        queryByText = _render10.queryByText;
+
+    var dropdown = queryByText("dropdown-test"); //Verify that is not showed before
+
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.mouseOver(dropdown);
+    });
+    expect(queryByText("option-test")).toBeTruthy();
+  });
+});

package/dropdown/types.d.ts

@@ -6,21 +6,17 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type SVG = React.SVGProps<SVGSVGElement>;
 declare type Option = {
     /**
      * Option display value.
      */
     label?: string;
     /**
-     * Element used as the icon that will be placed next to the
+     * Element or path used as the icon that will be placed next to the
      * option label.
      */
-    icon?: SVG;
-    /**
-     * @deprecated URL of the icon that will be placed next to the option label.
-     */
-    iconSrc?: string;
+    icon?: string | SVG;
     /**
      * Option inner value.
      */
@@ -37,15 +33,10 @@ declare type Props = {
      */
     optionsIconPosition?: "before" | "after";
     /**
-     * Element used as the icon that will be placed next to the
-     * dropdown label.
-     */
-    icon?: SVG;
-    /**
-     * @deprecated URL of the icon that will be placed next to the
+     * Element or path used as the icon that will be placed next to the
      * dropdown label.
      */
-    iconSrc?: string;
+    icon?: string | SVG;
     /**
      * Whether the icon should appear after or before the label.
      */

package/file-input/FileInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import FileInputPropsType from "./types";
-declare const DxcFileInput: ({ name, mode, label, helperText, accept, minSize, maxSize, showPreview, multiple, disabled, callbackFile, value, margin, tabIndex, }: FileInputPropsType) => JSX.Element;
+declare const DxcFileInput: ({ name, mode, label, buttonLabel, dropAreaLabel, helperText, accept, minSize, maxSize, showPreview, multiple, disabled, callbackFile, value, margin, tabIndex, }: FileInputPropsType) => JSX.Element;
 export default DxcFileInput;