@dxc-technology/halstack-react 9.0.0 → 9.1.0

package/useTheme.js

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 
 var _react = require("react");
 
-var _variables = require("./common/variables.js");
+var _variables = require("./common/variables");
 
 var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
 

package/useTranslatedLabels.d.ts

@@ -1,2 +1,85 @@
-declare const useTranslatedLabels: () => any;
+declare const useTranslatedLabels: () => {
+    formFields?: Partial<{
+        optionalLabel: string;
+        requiredSelectionErrorMessage: string;
+        requiredValueErrorMessage: string;
+        formatRequestedErrorMessage: string;
+        lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
+        logoAlternativeText: string;
+    }>;
+    applicationLayout?: Partial<{
+        visibilityToggleTitle: string;
+    }>;
+    alert?: Partial<{
+        infoTitleText: string;
+        successTitleText: string;
+        warningTitleText: string;
+        errorTitleText: string;
+    }>;
+    dateInput?: Partial<{
+        invalidDateErrorMessage: string;
+    }>;
+    dialog?: Partial<{
+        closeIconAriaLabel: string;
+    }>;
+    fileInput?: Partial<{
+        fileSizeGreaterThanErrorMessage: string;
+        fileSizeLessThanErrorMessage: string;
+        multipleButtonLabelDefault: string;
+        singleButtonLabelDefault: string;
+        dropAreaButtonLabelDefault: string;
+        multipleDropAreaLabelDefault: string;
+        singleDropAreaLabelDefault: string;
+        deleteFileActionTitle: string;
+    }>;
+    footer?: Partial<{
+        copyrightText: (year: number) => string;
+    }>;
+    header?: Partial<{
+        closeIcon: string;
+        hamburguerTitle: string;
+    }>;
+    numberInput?: Partial<{
+        valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
+        valueLessThanOrEqualToErrorMessage: (value: number) => string;
+        decrementValueTitle: string;
+        incrementValueTitle: string;
+    }>;
+    paginator?: Partial<{
+        itemsPerPageText: string;
+        minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
+        goToPageText: string;
+        pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
+    }>;
+    passwordInput?: Partial<{
+        inputShowPasswordTitle: string;
+        inputHidePasswordTitle: string;
+    }>;
+    quickNav?: Partial<{
+        contentTitle: string;
+    }>;
+    radioGroup?: Partial<{
+        optionalItemLabelDefault: string;
+    }>;
+    select?: Partial<{
+        noMatchesErrorMessage: string;
+        actionClearSelectionTitle: string;
+        actionClearSearchTitle: string;
+    }>;
+    tabs?: Partial<{
+        scrollLeft: string;
+        scrollRight: string;
+    }>;
+    textInput?: Partial<{
+        clearFieldActionTitle: string;
+        searchingMessage: string;
+        fetchingDataErrorMessage: string;
+    }>;
+    calendar?: Partial<{
+        daysShort: string[];
+        months: string[];
+        previousMonthTitle: string;
+        nextMonthTitle: string;
+    }>;
+};
 export default useTranslatedLabels;

package/utils/BaseTypography.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+declare type TypographyContextProps = {
+    as?: keyof HTMLElementTagNameMap;
+    display?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    letterSpacing?: string;
+    lineHeight?: string;
+    textAlign?: string;
+    color?: string;
+    textDecoration?: string;
+    textOverflow?: string;
+    whiteSpace?: string;
+};
+declare type BaseTypographyProps = TypographyContextProps & {
+    children: React.ReactNode;
+};
+declare const BaseTypography: ({ as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace, children, }: BaseTypographyProps) => JSX.Element;
+export default BaseTypography;

package/utils/BaseTypography.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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 TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
+
+var BaseTypography = function BaseTypography(_ref) {
+  var as = _ref.as,
+      display = _ref.display,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      fontStyle = _ref.fontStyle,
+      fontWeight = _ref.fontWeight,
+      letterSpacing = _ref.letterSpacing,
+      lineHeight = _ref.lineHeight,
+      textAlign = _ref.textAlign,
+      color = _ref.color,
+      textDecoration = _ref.textDecoration,
+      textOverflow = _ref.textOverflow,
+      whiteSpace = _ref.whiteSpace,
+      children = _ref.children;
+  var componentContext = (0, _react.useContext)(TypographyContext);
+  var contextValue = (0, _react.useMemo)(function () {
+    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14;
+
+    return {
+      as: (_ref2 = as !== null && as !== void 0 ? as : componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) !== null && _ref2 !== void 0 ? _ref2 : "span",
+      display: (_ref3 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref3 !== void 0 ? _ref3 : "inline",
+      fontFamily: (_ref4 = fontFamily !== null && fontFamily !== void 0 ? fontFamily : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) !== null && _ref4 !== void 0 ? _ref4 : "Open Sans, sans-serif",
+      fontSize: (_ref5 = fontSize !== null && fontSize !== void 0 ? fontSize : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) !== null && _ref5 !== void 0 ? _ref5 : "1rem",
+      fontStyle: (_ref6 = fontStyle !== null && fontStyle !== void 0 ? fontStyle : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) !== null && _ref6 !== void 0 ? _ref6 : "normal",
+      fontWeight: (_ref7 = fontWeight !== null && fontWeight !== void 0 ? fontWeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) !== null && _ref7 !== void 0 ? _ref7 : "400",
+      letterSpacing: (_ref8 = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) !== null && _ref8 !== void 0 ? _ref8 : "0em",
+      lineHeight: (_ref9 = lineHeight !== null && lineHeight !== void 0 ? lineHeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) !== null && _ref9 !== void 0 ? _ref9 : "1.5em",
+      textAlign: (_ref10 = textAlign !== null && textAlign !== void 0 ? textAlign : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) !== null && _ref10 !== void 0 ? _ref10 : "left",
+      color: (_ref11 = color !== null && color !== void 0 ? color : componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) !== null && _ref11 !== void 0 ? _ref11 : "#000000",
+      textDecoration: (_ref12 = textDecoration !== null && textDecoration !== void 0 ? textDecoration : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) !== null && _ref12 !== void 0 ? _ref12 : "none",
+      textOverflow: (_ref13 = textOverflow !== null && textOverflow !== void 0 ? textOverflow : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) !== null && _ref13 !== void 0 ? _ref13 : "unset",
+      whiteSpace: (_ref14 = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) !== null && _ref14 !== void 0 ? _ref14 : "normal"
+    };
+  }, [as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace]);
+  return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react["default"].createElement(StyledTypography, contextValue, children));
+};
+
+var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n  margin: 0;\n"])), function (_ref15) {
+  var display = _ref15.display;
+  return display;
+}, function (_ref16) {
+  var color = _ref16.color;
+  return color;
+}, function (_ref17) {
+  var fontFamily = _ref17.fontFamily;
+  return fontFamily;
+}, function (_ref18) {
+  var fontSize = _ref18.fontSize;
+  return fontSize;
+}, function (_ref19) {
+  var fontStyle = _ref19.fontStyle;
+  return fontStyle;
+}, function (_ref20) {
+  var fontWeight = _ref20.fontWeight;
+  return fontWeight;
+}, function (_ref21) {
+  var letterSpacing = _ref21.letterSpacing;
+  return letterSpacing;
+}, function (_ref22) {
+  var lineHeight = _ref22.lineHeight;
+  return lineHeight;
+}, function (_ref23) {
+  var textAlign = _ref23.textAlign;
+  return textAlign;
+}, function (_ref24) {
+  var textDecoration = _ref24.textDecoration;
+  return textDecoration;
+}, function (_ref25) {
+  var textOverflow = _ref25.textOverflow;
+  return textOverflow;
+}, function (_ref26) {
+  var whiteSpace = _ref26.whiteSpace;
+  return whiteSpace;
+}, function (_ref27) {
+  var textOverflow = _ref27.textOverflow;
+  return textOverflow !== "unset" ? "hidden" : "visible";
+});
+
+var _default = BaseTypography;
+exports["default"] = _default;

package/utils/FocusLock.js

@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var not = {
   inert: ":not([inert]):not([inert] *)",
   negTabIndex: ':not([tabindex^="-"])',
-  disabled: ":not(:disabled):not([aria-disabled='true'])"
+  disabled: ":not(:disabled)"
 };
 var focusableQuery = ["a[href]".concat(not.inert).concat(not.negTabIndex), "area[href]".concat(not.inert).concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "select".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "button".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "details".concat(not.inert, " > summary:first-of-type").concat(not.negTabIndex), "iframe".concat(not.inert).concat(not.negTabIndex), "audio[controls]".concat(not.inert).concat(not.negTabIndex), "video[controls]".concat(not.inert).concat(not.negTabIndex), "[contenteditable]".concat(not.inert).concat(not.negTabIndex), "[tabindex]".concat(not.inert).concat(not.negTabIndex).concat(not.disabled)].join(",");
 

package/wizard/Wizard.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -155,7 +155,7 @@ var DxcWizard = function DxcWizard(_ref) {
   })));
 };
 
-var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  ", ";\n  font-family: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  ", ";\n  font-family: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return props.mode === "vertical" ? "column" : "row";
 }, function (props) {
   return props.mode === "vertical" && "height: 500px";

package/wizard/Wizard.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Wizard = _interopRequireDefault(require("./Wizard"));
+var _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
 
 describe("Wizard components tests", function () {
   test("Wizard renders with correct steps", function () {

package/wizard/types.d.ts

@@ -1,13 +1,13 @@
 /// <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;
 };
 declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type Step = {
+export declare type StepProps = {
     /**
      * Step label.
      */
@@ -29,12 +29,11 @@ declare type Step = {
      */
     valid?: boolean;
 };
-export declare type Mode = "horizontal" | "vertical";
 declare type Props = {
     /**
      * The wizard can be showed in horizontal or vertical.
      */
-    mode?: Mode;
+    mode?: "horizontal" | "vertical";
     /**
      * Initially selected step, only when it is uncontrolled.
      */
@@ -51,7 +50,7 @@ declare type Props = {
     /**
      * An array of objects representing the steps.
      */
-    steps: Step[];
+    steps: StepProps[];
     /**
      * 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.