@dxc-technology/halstack-react 10.0.0 → 11.0.0

package/toggle-group/types.d.ts

@@ -1,29 +1,28 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type OptionCommons = {
-    /**
-     * Number with the option inner value.
-     */
-    value: number;
-};
-declare type OptionIcon = OptionCommons & {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type OptionIcon = {
     /**
      * String with the option display value.
      */
-    label?: string;
+    label?: never;
     /**
      * Element used as the icon. Icon and label can't be used at same time.
      */
     icon: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title: string;
 };
-export declare type OptionLabel = OptionCommons & {
+export type OptionLabel = {
     /**
      * String with the option display value.
      */
@@ -32,9 +31,19 @@ export declare type OptionLabel = OptionCommons & {
      * Element used as the icon. Icon and label can't be used at same time.
      */
     icon?: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title?: never;
 };
-declare type Option = OptionIcon | OptionLabel;
-declare type CommonProps = {
+type Option = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+} & (OptionIcon | OptionLabel);
+type CommonProps = {
     /**
      * Text to be placed above the component.
      */
@@ -61,7 +70,7 @@ declare type CommonProps = {
      */
     tabIndex?: number;
 };
-declare type SingleSelectionToggle = CommonProps & {
+type SingleSelectionToggleGroup = CommonProps & {
     /**
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
@@ -81,7 +90,7 @@ declare type SingleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number) => void;
 };
-declare type MultipleSelectionToggle = CommonProps & {
+type MultipleSelectionToggleGroup = CommonProps & {
     /**
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
@@ -101,5 +110,5 @@ declare type MultipleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number[]) => void;
 };
-declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
+type Props = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
 export default Props;

package/typography/Typography.js

@@ -1,32 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
-
 var _excluded = ["textOverflow", "whiteSpace", "children"];
-
 var DxcTypography = function DxcTypography(_ref) {
   var textOverflow = _ref.textOverflow,
-      whiteSpace = _ref.whiteSpace,
-      children = _ref.children,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    whiteSpace = _ref.whiteSpace,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], (0, _extends2["default"])({
     textOverflow: textOverflow,
     whiteSpace: whiteSpace == null && textOverflow != null && textOverflow !== "unset" ? "nowrap" : whiteSpace
   }, props), children);
 };
-
-var _default = DxcTypography;
-exports["default"] = _default;
+var _default = exports["default"] = DxcTypography;

package/typography/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type Props = {
+type Props = {
     as?: keyof HTMLElementTagNameMap;
     display?: "inline" | "block";
     fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";

package/useTheme.d.ts

@@ -197,16 +197,21 @@ declare const useTheme: () => {
         hoverBackgroundColorCheckedOnDark: string;
         disabledBackgroundColorChecked: string;
         disabledBackgroundColorCheckedOnDark: string;
+        readOnlyBackgroundColorChecked: string;
+        hoverReadOnlyBackgroundColorChecked: string;
         borderColor: string;
         borderColorOnDark: string;
         hoverBorderColor: string;
         hoverBorderColorOnDark: string;
         disabledBorderColor: string;
         disabledBorderColorOnDark: string;
+        readOnlyBorderColor: string;
+        hoverReadOnlyBorderColor: string;
         checkColor: string;
         checkColorOnDark: string;
         disabledCheckColor: string;
         disabledCheckColorOnDark: string;
+        readOnlyCheckColor: string;
         fontFamily: string;
         fontSize: string;
         fontWeight: string;
@@ -488,6 +493,14 @@ declare const useTheme: () => {
         level5LineHeight: string;
         level5LetterSpacing: string;
     }>;
+    image?: Partial<{
+        captionFontColor: string;
+        captionFontFamily: string;
+        captionFontSize: string;
+        captionFontStyle: string;
+        captionFontWeight: string;
+        captionLineHeight: string;
+    }>;
     link?: Partial<{
         fontColor: string;
         fontFamily: string;
@@ -608,9 +621,9 @@ declare const useTheme: () => {
         errorRadioInputColor: string;
         hoverErrorRadioInputColor: string;
         activeErrorRadioInputColor: string;
-        readonlyRadioInputColor: string;
-        hoverReadonlyRadioInputColor: string;
-        activeReadonlyRadioInputColor: string;
+        readOnlyRadioInputColor: string;
+        hoverReadOnlyRadioInputColor: string;
+        activeReadOnlyRadioInputColor: string;
         disabledRadioInputColor: string;
         disabledLabelFontColor: string;
         disabledHelperTextFontColor: string;
@@ -992,6 +1005,8 @@ declare const useTheme: () => {
         disabledBorderColorOnDark: string;
         disabledContainerFillColor: string;
         disabledContainerFillColorOnDark: string;
+        readOnlyBorderColor: string;
+        hoverReadOnlyBorderColor: string;
         errorBorderColor: string;
         errorBorderColorOnDark: string;
         hoverErrorBorderColor: string;
@@ -1041,6 +1056,8 @@ declare const useTheme: () => {
         disabledBorderColorOnDark: string;
         disabledContainerFillColor: string;
         disabledContainerFillColorOnDark: string;
+        readOnlyBorderColor: string;
+        hoverReadOnlyBorderColor: string;
         errorBorderColor: string;
         errorBorderColorOnDark: string;
         hoverErrorBorderColor: string;

package/useTheme.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _variables = require("./common/variables");
-
 var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
-
 var useTheme = function useTheme() {
   var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
   return colorsTheme || _variables.componentTokens;
 };
-
-var _default = useTheme;
-exports["default"] = _default;
+var _default = exports["default"] = useTheme;

package/useTranslatedLabels.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _variables = require("./common/variables");
-
 var _HalstackContext = require("./HalstackContext");
-
 var useTranslatedLabels = function useTranslatedLabels() {
   var labels = (0, _react.useContext)(_HalstackContext.HalstackLanguageContext);
   return labels || _variables.defaultTranslatedComponentLabels;
 };
-
-var _default = useTranslatedLabels;
-exports["default"] = _default;
+var _default = exports["default"] = useTranslatedLabels;

package/utils/BaseTypography.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type TypographyContextProps = {
+type TypographyContextProps = {
     as?: keyof HTMLElementTagNameMap;
     display?: string;
     fontFamily?: string;
@@ -14,7 +14,7 @@ declare type TypographyContextProps = {
     textOverflow?: string;
     whiteSpace?: string;
 };
-declare type BaseTypographyProps = TypographyContextProps & {
+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;

package/utils/BaseTypography.js

@@ -1,47 +1,36 @@
 "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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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;
+    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",
@@ -62,7 +51,6 @@ var BaseTypography = function BaseTypography(_ref) {
     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;
@@ -103,6 +91,4 @@ var StyledTypography = _styledComponents["default"].span(_templateObject || (_te
   var textOverflow = _ref27.textOverflow;
   return textOverflow !== "unset" ? "hidden" : "visible";
 });
-
-var _default = BaseTypography;
-exports["default"] = _default;
+var _default = exports["default"] = BaseTypography;

package/utils/FocusLock.js

@@ -1,33 +1,26 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var not = {
   negTabIndex: ':not([tabindex^="-"])',
   disabled: ":not(:disabled)"
 };
 var focusableQuery = ["a[href]".concat(not.negTabIndex), "area[href]".concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.negTabIndex).concat(not.disabled), "select".concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.negTabIndex).concat(not.disabled), "button".concat(not.negTabIndex).concat(not.disabled), "details > summary:first-of-type".concat(not.negTabIndex), "iframe".concat(not.negTabIndex), "audio[controls]".concat(not.negTabIndex), "video[controls]".concat(not.negTabIndex), "[contenteditable]".concat(not.negTabIndex), "[tabindex]".concat(not.negTabIndex).concat(not.disabled)].join(",");
-
 var getFocusableElements = function getFocusableElements(container) {
   return Array.prototype.slice.call(container.querySelectorAll(focusableQuery)).filter(function (element) {
     return element.getAttribute("aria-hidden") !== "true" && window.getComputedStyle(element).display !== "none" && window.getComputedStyle(element).visibility !== "hidden";
   });
 };
+
 /**
  * This function will try to focus the element and return true if it was able to receive the focus.
  * Even if the element is focusable (passes any of the conditions of our selector), there is the possibility
@@ -35,37 +28,32 @@ var getFocusableElements = function getFocusableElements(container) {
  * @param element: HTMLElement
  * @returns
  */
-
-
 var attempFocus = function attempFocus(element) {
   element === null || element === void 0 ? void 0 : element.focus();
   return document.activeElement === element;
 };
+
 /**
  * @param element: HTMLElement
  * @returns boolean: true if element is contained inside a Radix Portal, false otherwise.
  */
-
-
 var radixPortalContains = function radixPortalContains(activeElement) {
   var radixPortals = document.querySelectorAll("[data-radix-portal]");
   return Array.prototype.slice.call(radixPortals).some(function (portal) {
     return portal.contains(activeElement);
   });
 };
+
 /**
  * Custom hook that returns an array of focusable elements inside a container.
  * @param ref: React.MutableRefObject<HTMLDivElement>
  * @returns
  */
-
-
 var useFocusableElements = function useFocusableElements(ref) {
   var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      focusableElements = _useState2[0],
-      setFocusableElements = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    focusableElements = _useState2[0],
+    setFocusableElements = _useState2[1];
   (0, _react.useEffect)(function () {
     if (ref.current != null) {
       setFocusableElements(getFocusableElements(ref.current));
@@ -84,6 +72,7 @@ var useFocusableElements = function useFocusableElements(ref) {
   }, []);
   return focusableElements;
 };
+
 /**
  * Traps the focus inside the children of the component. It will focus the first focusable element when the component is mounted.
  * When the focus is on the last focusable element and the user tries to focus the next element, it will focus the first element.
@@ -92,33 +81,22 @@ var useFocusableElements = function useFocusableElements(ref) {
  * @param children: React.ReactNode
  * @returns
  */
-
-
 var FocusLock = function FocusLock(_ref) {
   var children = _ref.children;
   var childrenContainerRef = (0, _react.useRef)();
   var focusableElements = useFocusableElements(childrenContainerRef);
   var focusFirst = (0, _react.useCallback)(function () {
     var _childrenContainerRef;
-
-    if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) (_childrenContainerRef = childrenContainerRef.current) === null || _childrenContainerRef === void 0 ? void 0 : _childrenContainerRef.focus();else if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 0) for (var i = 0; i < focusableElements.length; i++) {
-      if (attempFocus(focusableElements[i])) return;
-    }
+    if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) (_childrenContainerRef = childrenContainerRef.current) === null || _childrenContainerRef === void 0 ? void 0 : _childrenContainerRef.focus();else if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 0) for (var i = 0; i < focusableElements.length; i++) if (attempFocus(focusableElements[i])) return;
   }, [focusableElements]);
-
   var focusLast = function focusLast() {
-    for (var i = focusableElements.length - 1; i >= 0; i--) {
-      if (attempFocus(focusableElements[i])) return;
-    }
+    for (var i = focusableElements.length - 1; i >= 0; i--) if (attempFocus(focusableElements[i])) return;
   };
-
   var focusLock = function focusLock(event) {
     if (event.key === "Tab") focusableElements.length === 0 && event.preventDefault();else if (event.key === "Tab" && event.key === "Shift") focusableElements.length === 0 && event.preventDefault();
   };
-
   (0, _react.useEffect)(function () {
     var _childrenContainerRef2;
-
     if (!((_childrenContainerRef2 = childrenContainerRef.current) !== null && _childrenContainerRef2 !== void 0 && _childrenContainerRef2.contains(document.activeElement)) && !radixPortalContains(document.activeElement)) focusFirst();
   }, [focusFirst]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -133,6 +111,4 @@ var FocusLock = function FocusLock(_ref) {
     tabIndex: 0
   }));
 };
-
-var _default = FocusLock;
-exports["default"] = _default;
+var _default = exports["default"] = FocusLock;