@dxc-technology/halstack-react 8.0.0 → 9.0.0

package/dropdown/Dropdown.stories.tsx

@@ -4,10 +4,11 @@ import DxcDropdown from "./Dropdown";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DropdownMenu from "./DropdownMenu";
-import DxcCheckbox from "../checkbox/Checkbox";
-import DxcTextInput from "../text-input/TextInput";
 import { Option } from "./types";
-
+import useTheme from "../useTheme";
+import DxcFlex from "../flex/Flex";
+import { HalstackProvider } from "../HalstackContext";
+import { ThemeProvider } from "styled-components";
 
 export default {
   title: "Dropdown",
@@ -20,20 +21,14 @@ const hamburguerIcon = (
   </svg>
 );
 const iconSVG = (
-  <svg viewBox="0 0 24 24" fill="currentColor">
+  <svg viewBox="0 0 24 24" height="24" width="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 enableBackground="new 0 0 24 24" height="48" viewBox="0 0 24 24" width="48" 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="48" width="48">
+    <path d="M11 44q-1.2 0-2.1-.9Q8 42.2 8 41V15q0-1.2.9-2.1.9-.9 2.1-.9h5.5v-.5q0-3.15 2.175-5.325Q20.85 4 24 4q3.15 0 5.325 2.175Q31.5 8.35 31.5 11.5v.5H37q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h26V15h-5.5v4.5q0 .65-.425 1.075Q30.65 21 30 21q-.65 0-1.075-.425-.425-.425-.425-1.075V15h-9v4.5q0 .65-.425 1.075Q18.65 21 18 21q-.65 0-1.075-.425-.425-.425-.425-1.075V15H11v26Zm8.5-29h9v-.5q0-1.9-1.3-3.2Q25.9 7 24 7q-1.9 0-3.2 1.3-1.3 1.3-1.3 3.2ZM11 41V15v26Z" />
   </svg>
 );
 const iconUrl = "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png";
@@ -60,6 +55,18 @@ const defaultOptions: Option[] = [
     value: "5",
     label: "Aliexpress",
   },
+  {
+    value: "6",
+    label: "Etsy",
+  },
+  {
+    value: "7",
+    label: "Alibaba",
+  },
+  {
+    value: "8",
+    label: "Gearbest shop",
+  },
 ];
 const options: Option[] = [
   {
@@ -85,7 +92,15 @@ const optionWithIcon: Option[] = [
 
 const optionsIcon: any = options.map((op, i) => ({ ...op, icon: icons[i] }));
 
-export const Chromatic = () => (
+const opinionatedTheme = {
+  dropdown: {
+    baseColor: "#ffffff",
+    fontColor: "#000000",
+    optionFontColor: "#000000",
+  },
+};
+
+const Dropdown = () => (
   <>
     <ExampleContainer>
       <Title title="Default" theme="light" level={4} />
@@ -134,9 +149,18 @@ export const Chromatic = () => (
       <DxcDropdown options={options} onSelectOption={(value) => {}} icon={hamburguerIcon} caretHidden />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Large icon" theme="light" level={4} />
+      <Title title="Large icon (SVG)" theme="light" level={4} />
       <DxcDropdown label="Large icon" options={options} onSelectOption={(value) => {}} icon={iconSVGLarge} />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large icon (image)" theme="light" level={4} />
+      <DxcDropdown
+        label="Large icon"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/2048px-Hamburger_icon.svg.png"
+      />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled with icon" theme="light" level={4} />
       <DxcDropdown
@@ -219,94 +243,196 @@ export const Chromatic = () => (
         size="fillParent"
       />
     </ExampleContainer>
+    <ExampleContainer expanded>
+      <Title title="Opened menu" theme="light" level={4} />
+      <DxcDropdown label="Label" options={options} onSelectOption={(value) => {}} margin={{ top: "xxlarge" }} />
+    </ExampleContainer>
   </>
 );
 
-const DropdownListStates = () => (
+const DropdownListStates = () => {
+  const colorsTheme: any = useTheme();
+
+  return (
+    <>
+      <Title title="Dropdown Menu" theme="light" level={2} />
+      <ExampleContainer>
+        <Title
+          title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
+          theme="light"
+          level={3}
+        />
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px",
+            height: "150px",
+            width: "min-content",
+            marginBottom: "100px",
+            padding: "20px",
+            border: "1px solid black",
+            borderRadius: "4px",
+            overflow: "auto",
+            zIndex: "1300",
+          }}
+        >
+          <DxcDropdown
+            label="Select a platform"
+            options={defaultOptions}
+            onSelectOption={(option) => {}}
+            size="medium"
+          />
+          <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
+        </div>
+      </ExampleContainer>
+      <ThemeProvider theme={colorsTheme.dropdown}>
+        <Title title="Option states" theme="light" level={3} />
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered option" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="before"
+            visualFocusIndex={-1}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={optionWithIcon}
+            styles={{ width: 240 }}
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Active option" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="before"
+            visualFocusIndex={-1}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={optionWithIcon}
+            styles={{ width: 240 }}
+          />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Focused option" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="before"
+            visualFocusIndex={0}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={options}
+            styles={{ width: 240 }}
+          />
+        </ExampleContainer>
+        <Title title="Icons" theme="light" level={3} />
+        <ExampleContainer>
+          <Title title="Before" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="before"
+            visualFocusIndex={-1}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={optionsIcon}
+            styles={{ width: 240 }}
+          />
+          <Title title="After" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="after"
+            visualFocusIndex={-1}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={optionsIcon}
+            styles={{ width: 240 }}
+          />
+        </ExampleContainer>
+      </ThemeProvider>
+    </>
+  );
+};
+
+const DropdownRightAlignment = () => (
+  <ExampleContainer expanded>
+    <Title title="Dropdown collisions on the right boundary (right)" theme="light" level={4} />
+    <DxcFlex justifyContent="flex-end">
+      <DxcDropdown label="Label" options={options} onSelectOption={(value) => {}} />
+    </DxcFlex>
+  </ExampleContainer>
+);
+
+const DropdownCenterAlignment = () => (
+  <ExampleContainer expanded>
+    <Title title="Dropdown collisions on the right boundary (centered)" theme="light" level={4} />
+    <DxcFlex justifyContent="flex-end">
+      <DxcDropdown label="Label" options={defaultOptions} onSelectOption={(value) => {}} margin="small" />
+    </DxcFlex>
+  </ExampleContainer>
+);
+
+export const Chromatic = Dropdown.bind({});
+Chromatic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getAllByRole("button");
+  await userEvent.click(buttonList[buttonList.length - 1]);
+};
+
+export const OpinionatedTheme = () => (
   <>
-    <Title title="Dropdown Menu" theme="light" level={2} />
-    <Title title="Default with opened menu" theme="light" level={3} />
+    <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
-      <div style={{ display: "flex", gap: "30px", flexDirection: "column", marginBottom: "80px" }}>
-        <DxcDropdown label="Select a platform" options={defaultOptions} onSelectOption={(option) => {}} size="medium" />
-        <DxcTextInput label="Your name" onChange={() => {}} />
-        <DxcCheckbox
-          label="You understand the selection and give your consent"
-          onChange={() => {}}
-          labelPosition="after"
-        />
-      </div>
+      <Title title="Default" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Default" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
     </ExampleContainer>
-    <Title title="Option states" theme="light" level={3} />
     <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Hovered option" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownId="dX"
-        iconsPosition="before"
-        visualFocusIndex={-1}
-        optionOnClick={(option) => {}}
-        onKeyDown={(e) => {}}
-        options={optionWithIcon}
-        styles={{ width: 240 }}
-      />
+      <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="Active option" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownId="dX"
-        iconsPosition="before"
-        visualFocusIndex={-1}
-        optionOnClick={(option) => {}}
-        onKeyDown={(e) => {}}
-        options={optionWithIcon}
-        styles={{ width: 240 }}
-      />
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Actived" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Focused option" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownId="dX"
-        iconsPosition="before"
-        visualFocusIndex={0}
-        optionOnClick={(option) => {}}
-        onKeyDown={(e) => {}}
-        options={options}
-        styles={{ width: 240 }}
-      />
+    <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>
-    <Title title="Icons" theme="light" level={3} />
     <ExampleContainer>
-      <Title title="Before" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownId="dX"
-        iconsPosition="before"
-        visualFocusIndex={-1}
-        optionOnClick={(option) => {}}
-        onKeyDown={(e) => {}}
-        options={optionsIcon}
-        styles={{ width: 240 }}
-      />
-      <Title title="After" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownId="dX"
-        iconsPosition="after"
-        visualFocusIndex={-1}
-        optionOnClick={(option) => {}}
-        onKeyDown={(e) => {}}
-        options={optionsIcon}
-        styles={{ width: 240 }}
-      />
+      <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);
+  await userEvent.click(canvas.getAllByRole("button")[0]);
+};
+
+export const DropdownMenuAlignedRight = DropdownRightAlignment.bind({});
+DropdownMenuAlignedRight.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole("button"));
+};
+
+export const DropdownMenuAlignedCenter = DropdownCenterAlignment.bind({});
+DropdownMenuAlignedCenter.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole("button"));
 };

package/dropdown/DropdownMenu.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,18 +11,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _DropdownMenuItem = _interopRequireDefault(require("./DropdownMenuItem"));
 
 var _templateObject;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var id = _ref.id,
       dropdownTriggerId = _ref.dropdownTriggerId,
@@ -34,12 +26,10 @@ var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       onKeyDown = _ref.onKeyDown,
       options = _ref.options,
       styles = _ref.styles;
-  var colorsTheme = (0, _useTheme["default"])();
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.dropdown
-  }, /*#__PURE__*/_react["default"].createElement(DropdownMenuContainer, {
+  return /*#__PURE__*/_react["default"].createElement(DropdownMenuContainer, {
     onMouseDown: function onMouseDown(event) {
-      // Prevent the onBlur event from closing menu when clicking on the menu since it is implemented with a Portal and the menu is not a child of the container
+      // Prevent the onBlur event from closing menu when clicking on the menu since 
+      // it is implemented with a Portal and the menu is not a direct child of the container
       event.preventDefault();
     },
     onKeyDown: onKeyDown,
@@ -49,8 +39,8 @@ var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     "aria-orientation": "vertical",
     "aria-activedescendant": "option-".concat(visualFocusIndex),
     tabIndex: -1,
-    style: styles,
-    ref: ref
+    ref: ref,
+    style: styles
   }, options.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(_DropdownMenuItem["default"], {
       id: "option-".concat(index),
@@ -60,10 +50,10 @@ var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       onClick: menuItemOnClick,
       option: option
     });
-  })));
+  }));
 });
 
-var DropdownMenuContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 230px;\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  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) {
   return props.theme.optionBackgroundColor;
 }, function (props) {
   return props.theme.borderThickness;

package/dropdown/DropdownMenuItem.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,26 +11,17 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject, _templateObject2, _templateObject3;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var DropdownMenuItem = function DropdownMenuItem(_ref) {
   var id = _ref.id,
       visuallyFocused = _ref.visuallyFocused,
       iconPosition = _ref.iconPosition,
       _onClick = _ref.onClick,
       option = _ref.option;
-  var colorsTheme = (0, _useTheme["default"])();
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.dropdown
-  }, /*#__PURE__*/_react["default"].createElement(DropdownMenuItemContainer, {
+  return /*#__PURE__*/_react["default"].createElement(DropdownMenuItemContainer, {
     visuallyFocused: visuallyFocused,
     onClick: function onClick() {
       _onClick(option.value);
@@ -46,7 +35,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
     role: typeof option.icon === "string" ? undefined : "img"
   }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: option.icon
-  }) : option.icon), iconPosition === "before" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label)));
+  }) : option.icon), iconPosition === "before" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label));
 };
 
 var DropdownMenuItemContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: 36px;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
@@ -67,7 +56,7 @@ var DropdownMenuItemContainer = _styledComponents["default"].li(_templateObject
   return props.theme.activeOptionBackgroundColor;
 });
 
-var DropdownMenuItemLabel = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5rem;\n  color: ", ";\n"])), function (props) {
+var DropdownMenuItemLabel = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5rem;\n  color: ", ";\n  white-space: nowrap;\n"])), function (props) {
   return props.theme.optionFontFamily;
 }, function (props) {
   return props.theme.optionFontSize;

package/file-input/FileInput.js

@@ -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) {
@@ -385,10 +386,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 +413,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>
   </>
 );