@dxc-technology/halstack-react 0.0.0-64fdce7 → 0.0.0-6501724

package/dialog/Dialog.test.js

@@ -6,8 +6,43 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _Dialog = _interopRequireDefault(require("./Dialog.tsx"));
+
+var _TextInput = _interopRequireDefault(require("../text-input/TextInput.tsx"));
+
+var _Textarea = _interopRequireDefault(require("../textarea/Textarea.tsx"));
+
+var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox.tsx"));
+
+var _Select = _interopRequireDefault(require("../select/Select.tsx"));
+
+var _Button = _interopRequireDefault(require("../button/Button.tsx"));
+
+var _Link = _interopRequireDefault(require("../link/Link.tsx"));
+
+var _Card = _interopRequireDefault(require("../card/Card.tsx"));
+
+var _RadioGroup = _interopRequireDefault(require("../radio-group/RadioGroup.tsx"));
+
+var _Slider = _interopRequireDefault(require("../slider/Slider.tsx"));
+
+var _Switch = _interopRequireDefault(require("../switch/Switch.tsx"));
+
+var options = [{
+  label: "Female",
+  value: "female"
+}, {
+  label: "Male",
+  value: "male"
+}, {
+  label: "Non-binary",
+  value: "non-binary"
+}, {
+  label: "Other",
+  value: "other"
+}];
 describe("Dialog component tests", function () {
   test("Dialog renders with correct text and accesibility attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "dialog-text")),
@@ -50,7 +85,7 @@ describe("Dialog component tests", function () {
 
     expect(onCloseClick).toHaveBeenCalled();
   });
-  test("Calls correct function onCloseClick when 'escape' key is pressed", function () {
+  test("Calls correct function onCloseClick when 'Escape' key is pressed", function () {
     var onCloseClick = jest.fn();
 
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
@@ -58,7 +93,7 @@ describe("Dialog component tests", function () {
     }, "dialog-text")),
         getByRole = _render5.getByRole;
 
-    _react2.fireEvent.keyDown(getByRole("button"), {
+    _react2.fireEvent.keyDown(getByRole("dialog"), {
       key: "Escape",
       code: "Escape",
       keyCode: 27,
@@ -67,4 +102,268 @@ describe("Dialog component tests", function () {
 
     expect(onCloseClick).toHaveBeenCalled();
   });
+});
+describe("Dialog component: Focus lock tests", function () {
+  test("Close action: when there's no focusable content, the focus never leaves the close action (unless you click outside)", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "example-dialog")),
+        getByRole = _render6.getByRole;
+
+    var button = getByRole("button");
+    var dialog = getByRole("dialog");
+    expect(document.activeElement).toEqual(button);
+    expect(button.getAttribute("aria-label")).toBe("Close dialog");
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(button);
+
+    _react2.fireEvent.keyDown(dialog, {
+      key: "Tab",
+      shiftKey: true
+    });
+
+    expect(document.activeElement).toEqual(button);
+  });
+  test("Autofocus with Button component", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      label: "Accept"
+    }))),
+        getAllByRole = _render7.getAllByRole;
+
+    var button = getAllByRole("button")[0];
+    expect(document.activeElement).toEqual(button);
+    expect(button.getAttribute("aria-label")).not.toBe("Close dialog");
+  });
+  test("Autofocus with Card component", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      linkHref: "https://developer.dxc.com/halstack/next/components/card/"
+    }, "example-card"))),
+        getByRole = _render8.getByRole;
+
+    var card = getByRole("link");
+    expect(document.activeElement).toEqual(card);
+  });
+  test("Autofocus with Checkbox component", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Name"
+    }))),
+        getByRole = _render9.getByRole;
+
+    var checkbox = getByRole("checkbox");
+    expect(document.activeElement).toEqual(checkbox);
+  });
+  test("Autofocus with Link component", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "This is a text with a ", /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      href: "#"
+    }, "Link"), " to another page.")),
+        getByRole = _render10.getByRole;
+
+    var link = getByRole("link");
+    expect(document.activeElement).toEqual(link);
+  });
+  test("Autofocus with RadioGroup component", function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "Example",
+      options: options
+    }))),
+        getAllByRole = _render11.getAllByRole;
+
+    var checkedRadio = getAllByRole("radio")[0];
+    expect(document.activeElement).toEqual(checkedRadio);
+  });
+  test("Autofocus with Select component", function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "Country",
+      options: options
+    }))),
+        getByRole = _render12.getByRole;
+
+    var select = getByRole("combobox");
+    expect(document.activeElement).toEqual(select);
+  });
+  test("Autofocus with Slider component", function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      label: "label",
+      minValue: 0,
+      maxValue: 100,
+      showLimitsValues: true
+    }))),
+        getByRole = _render13.getByRole;
+
+    var slider = getByRole("slider");
+    expect(document.activeElement).toEqual(slider);
+  });
+  test("Autofocus with Switch component", function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "Example"
+    }))),
+        getByRole = _render14.getByRole;
+
+    var switchButton = getByRole("switch");
+    expect(document.activeElement).toEqual(switchButton);
+  });
+  test("Autofocus with Text Input component", function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Name"
+    }))),
+        getByRole = _render15.getByRole;
+
+    var input = getByRole("textbox");
+    expect(document.activeElement).toEqual(input);
+  });
+  test("Autofocus with Textarea component", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Name"
+    }))),
+        getByRole = _render16.getByRole;
+
+    var textarea = getByRole("textbox");
+    expect(document.activeElement).toEqual(textarea);
+  });
+  test("Negative tabindex elements are not automatically focused, even if it is enabled and a valid focusable item (programatically and by click)", function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
+      label: "Name",
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      label: "Name"
+    }))),
+        getAllByRole = _render17.getAllByRole,
+        getByRole = _render17.getByRole;
+
+    var inputs = getAllByRole("textbox");
+    var button = getByRole("button");
+    expect(document.activeElement).toEqual(inputs[1]);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(button);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(inputs[1]);
+  });
+  test("Focus jumps disabled components and negative tabIndexes when autofocusing first item", function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      label: "Accept",
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Older age",
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "Country",
+      options: options,
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "Country",
+      options: options,
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Name",
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      label: "Accept",
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Older age",
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "Country",
+      options: options,
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "Country",
+      options: options,
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Name",
+      tabIndex: -1
+    }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Description"
+    }))),
+        getAllByRole = _render18.getAllByRole;
+
+    var textarea = getAllByRole("textbox")[2];
+    expect(document.activeElement).toEqual(textarea);
+  });
+  test("Focus jumps from last element to the first", function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Accept",
+      disabled: true
+    }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Name"
+    }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "Name",
+      options: options
+    }))),
+        getByRole = _render19.getByRole;
+
+    var closeAction = getByRole("button");
+    var textarea = getByRole("textbox");
+    expect(document.activeElement).toEqual(textarea);
+
+    _userEvent["default"].tab();
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(closeAction);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(textarea);
+  });
+  test("'display: none;', 'visibility: hidden;' and 'type = 'hidden'' elements are never autofocused", function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
+      label: "Name",
+      style: {
+        display: "none"
+      }
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      label: "Name",
+      style: {
+        visibility: "hidden"
+      }
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      type: "hidden",
+      name: "example"
+    }))),
+        getByRole = _render20.getByRole;
+
+    var closeAction = getByRole("button");
+    expect(document.activeElement).toEqual(closeAction);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).toEqual(closeAction);
+  });
+  test("Focus gets trapped in the Dialog when there are not focusable elements inside until it is closed", function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Name"
+    }), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      isCloseVisible: false
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Policy agreement"), /*#__PURE__*/_react["default"].createElement("p", null, "Sample text.")), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Surname"
+    }))),
+        getAllByRole = _render21.getAllByRole;
+
+    var inputs = getAllByRole("textbox");
+    var dialog = getAllByRole("dialog")[0];
+
+    _userEvent["default"].tab();
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement).not.toEqual(inputs[1]);
+
+    _react2.fireEvent.keyDown(dialog, {
+      key: "Tab",
+      shiftKey: true
+    });
+
+    _react2.fireEvent.keyDown(dialog, {
+      key: "Tab",
+      shiftKey: true
+    });
+
+    expect(document.activeElement).not.toEqual(inputs[0]);
+  });
 });

package/dialog/types.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
 declare type Props = {
     /**
      * If true, the close 'x' button will be visible.
@@ -25,12 +18,6 @@ declare type Props = {
      * The responsibility of hiding the modal lies with the user.
      */
     onBackgroundClick?: () => void;
-    /**
-     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
-     * Size of the padding 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 padding sizes.
-     */
-    padding?: Padding | Space;
     /**
      * Value of the tabindex given to the close 'x' button.
      */

package/dropdown/Dropdown.js

@@ -19,9 +19,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 

package/dropdown/Dropdown.stories.tsx

@@ -6,8 +6,9 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DropdownMenu from "./DropdownMenu";
 import { Option } from "./types";
 import useTheme from "../useTheme";
-import { ThemeProvider } from "styled-components";
 import DxcFlex from "../flex/Flex";
+import { HalstackProvider } from "../HalstackContext";
+import { ThemeProvider } from "styled-components";
 
 export default {
   title: "Dropdown",
@@ -91,6 +92,14 @@ const optionWithIcon: Option[] = [
 
 const optionsIcon: any = options.map((op, i) => ({ ...op, icon: icons[i] }));
 
+const opinionatedTheme = {
+  dropdown: {
+    baseColor: "#ffffff",
+    fontColor: "#000000",
+    optionFontColor: "#000000",
+  },
+};
+
 const Dropdown = () => (
   <>
     <ExampleContainer>
@@ -374,6 +383,42 @@ Chromatic.play = async ({ canvasElement }) => {
   await userEvent.click(buttonList[buttonList.length - 1]);
 };
 
+export const OpinionatedTheme = () => (
+  <>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Default" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Hovered" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Actived" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Focused" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Disabled" options={options} onSelectOption={(value) => {}} icon={iconSVG} disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
+);
+
 export const DropdownMenuStates = DropdownListStates.bind({});
 DropdownMenuStates.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);

package/dropdown/Dropdown.test.js

@@ -10,10 +10,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Dropdown = _interopRequireDefault(require("./Dropdown"));
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _Dropdown = _interopRequireDefault(require("./Dropdown.tsx"));
+
+// Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
   fromRect: function fromRect() {

package/dropdown/DropdownMenu.js

@@ -53,7 +53,7 @@ var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }));
 });
 
-var DropdownMenuContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 230px;\n  min-width: min-content;\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n  background-color: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  border-radius: ", ";\n  border-top-right-radius: 0;\n  border-top-left-radius: 0;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  outline: none;\n"])), function (props) {
+var DropdownMenuContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 230px;\n  min-width: min-content;\n  padding: 0;\n  margin: 0;\n  background-color: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  border-radius: ", ";\n  border-top-right-radius: 0;\n  border-top-left-radius: 0;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  outline: none;\n\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n  }\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n"])), function (props) {
   return props.theme.optionBackgroundColor;
 }, function (props) {
   return props.theme.borderThickness;
@@ -63,6 +63,10 @@ var DropdownMenuContainer = _styledComponents["default"].ul(_templateObject || (
   return props.theme.borderColor;
 }, function (props) {
   return props.theme.borderRadius;
+}, function (props) {
+  return props.theme.scrollBarThumbColor;
+}, function (props) {
+  return props.theme.scrollBarTrackColor;
 });
 
 var _default = /*#__PURE__*/_react["default"].memo(DropdownMenu);

package/dropdown/DropdownMenuItem.js

@@ -30,8 +30,6 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
     role: "menuitem",
     tabIndex: -1
   }, iconPosition === "after" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label), option.icon && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemIcon, {
-    iconPosition: iconPosition,
-    label: option.label,
     role: typeof option.icon === "string" ? undefined : "img"
   }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: option.icon

package/dropdown/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-export declare type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
+declare type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
 declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 export declare type Option = {
     /**

package/file-input/FileInput.js

@@ -29,7 +29,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _uuid = require("uuid");
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -250,6 +250,7 @@ var DxcFileInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       return selectedFiles[key];
     });
     addFile(filesArray);
+    e.target.value = null;
   };
 
   var onDelete = (0, _react.useCallback)(function (fileName) {
@@ -370,7 +371,6 @@ var DxcFileInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     theme: colorsTheme.fileInput
   }, /*#__PURE__*/_react["default"].createElement(FileInputContainer, {
     margin: margin,
-    name: name,
     ref: ref
   }, /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: fileInputId,
@@ -385,10 +385,8 @@ var DxcFileInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     accept: accept,
     multiple: multiple,
     onChange: selectFiles,
-    name: name,
     disabled: disabled,
-    readOnly: true,
-    "aria-hidden": "true"
+    readOnly: true
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
     label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : multiple ? translatedLabels.fileInput.multipleButtonLabelDefault : translatedLabels.fileInput.singleButtonLabelDefault,
@@ -414,10 +412,8 @@ var DxcFileInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     accept: accept,
     multiple: multiple,
     onChange: selectFiles,
-    name: name,
     disabled: disabled,
-    readOnly: true,
-    "aria-hidden": "true"
+    readOnly: true
   }), /*#__PURE__*/_react["default"].createElement(DragDropArea, {
     isDragging: isDragging,
     disabled: disabled,

package/file-input/FileInput.stories.tsx

@@ -3,13 +3,14 @@ import DxcFileInput from "./FileInput";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import FileItem from "./FileItem";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "File input",
   component: DxcFileInput,
 };
 
-const picPreview = "https://cdn.mos.cms.futurecdn.net/CAZ6JXi6huSuN4QGE627NR.jpg"
+const picPreview = "https://cdn.mos.cms.futurecdn.net/CAZ6JXi6huSuN4QGE627NR.jpg";
 
 const file1 = new File(["file1"], "file.pdf", { type: "text/plain" });
 const file2 = new File(["file2"], "file2.mp3", {
@@ -63,6 +64,12 @@ const filesExamples = [
   },
 ];
 
+const opinionatedTheme = {
+  fileInput: {
+    fontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <Title title="File item states" theme="light" level={2} />
@@ -529,7 +536,83 @@ export const Chromatic = () => (
         mode="dropzone"
         margin="xxlarge"
       />
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Single file" theme="light" level={4} />
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Invalid single file" theme="light" level={4} />
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExampleError}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          mode="filedrop"
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          mode="filedrop"
+          label="File input"
+          helperText="Please select files"
+          value={fileExampleError}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          mode="dropzone"
+          value={fileExample}
+          callbackFile={() => {}}
+          multiple={false}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          mode="dropzone"
+          value={fileExampleError}
+          callbackFile={() => {}}
+          multiple={false}
+        />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );