@dxc-technology/halstack-react 0.0.0-8b5e703 → 0.0.0-8b61ced

package/tabs/Tabs.test.js

@@ -25,6 +25,23 @@ var sampleTabsWithBadge = [{
   label: "Tab-3",
   notificationNumber: "101"
 }];
+var sampleTabsMiddleDisabled = [{
+  label: "Tab-1"
+}, {
+  label: "Tab-2",
+  isDisabled: true
+}, {
+  label: "Tab-3"
+}];
+var sampleTabsLastTabNonDisabled = [{
+  label: "Tab-1",
+  isDisabled: true
+}, {
+  label: "Tab-2",
+  isDisabled: true
+}, {
+  label: "Tab-3"
+}];
 describe("Tabs component tests", function () {
   test("Tabs render with correct labels", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
@@ -103,18 +120,26 @@ describe("Tabs component tests", function () {
       tabs: sampleTabs,
       onTabClick: onTabClick
     })),
-        getByText = _render6.getByText;
+        getByText = _render6.getByText,
+        getAllByRole = _render6.getAllByRole;
 
+    var tabs = getAllByRole("tab");
     var tab1 = getByText("Tab-1");
     var tab2 = getByText("Tab-2");
 
     _react2.fireEvent.click(tab2);
 
     expect(onTabClick).toHaveBeenCalledWith(1);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
 
     _react2.fireEvent.click(tab1);
 
     expect(onTabClick).toHaveBeenCalledWith(0);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
   });
   test("Controlled tabs", function () {
     var onTabClick = jest.fn();
@@ -124,17 +149,203 @@ describe("Tabs component tests", function () {
       onTabClick: onTabClick,
       activeTabIndex: 0
     })),
-        getByText = _render7.getByText;
+        getByText = _render7.getByText,
+        getAllByRole = _render7.getAllByRole;
 
-    var tab2 = getByText("Tab-2");
-    var tab3 = getByText("Tab-3");
+    var tabs = getAllByRole("tab");
 
-    _react2.fireEvent.click(tab2);
+    _react2.fireEvent.click(tabs[1]);
+
+    expect(onTabClick).toHaveBeenCalledWith(1);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+
+    _react2.fireEvent.click(tabs[2]);
+
+    expect(onTabClick).toHaveBeenCalledWith(2);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+  });
+  test("Uncontrolled tabs should have focus in the first non-disabled tab", function () {
+    var onTabClick = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsLastTabNonDisabled,
+      onTabClick: onTabClick
+    })),
+        getAllByRole = _render8.getAllByRole;
+
+    var tabs = getAllByRole("tab");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Controlled tabs with active index in disabled tab should not change focus to the first available tab", function () {
+    var onTabClick = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsLastTabNonDisabled,
+      onTabClick: onTabClick,
+      activeTabIndex: 0
+    })),
+        getAllByRole = _render9.getAllByRole;
+
+    var tabs = getAllByRole("tab");
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+
+    _react2.fireEvent.click(tabs[2]);
+
+    expect(onTabClick).toHaveBeenCalledWith(2);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+  });
+  test("Select tabs with keyboard event arrows", function () {
+    var onTabClick = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabs,
+      onTabClick: onTabClick
+    })),
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole,
+        getAllByRole = _render10.getAllByRole;
+
+    var tabList = getByRole("tablist");
+    var tab1 = getByText("Tab-1");
+    var tabs = getAllByRole("tab");
+
+    _react2.fireEvent.click(tab1);
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
 
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
     expect(onTabClick).toHaveBeenCalledWith(1);
 
-    _react2.fireEvent.click(tab3);
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+    expect(onTabClick).toHaveBeenCalledWith(2);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(1);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
 
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+    expect(onTabClick).toHaveBeenCalledWith(2);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+  });
+  test("Skip disabled tab with keyboard event arrows", function () {
+    var onTabClick = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsMiddleDisabled,
+      onTabClick: onTabClick
+    })),
+        getByText = _render11.getByText,
+        getByRole = _render11.getByRole,
+        getAllByRole = _render11.getAllByRole;
+
+    var tabList = getByRole("tablist");
+    var tab1 = getByText("Tab-1");
+    var tabs = getAllByRole("tab");
+
+    _react2.fireEvent.click(tab1);
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: " "
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
     expect(onTabClick).toHaveBeenCalledWith(2);
   });
 });

package/tabs/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type TabCommonProps = {
     /**
      * Whether the tab is disabled or not.
@@ -21,7 +21,7 @@ declare type TabCommonProps = {
      */
     notificationNumber?: boolean | number;
 };
-declare type TabLabelProps = TabCommonProps & {
+export declare type TabLabelProps = TabCommonProps & {
     /**
      * Tab label.
      */
@@ -31,7 +31,7 @@ declare type TabLabelProps = TabCommonProps & {
      */
     icon?: string | SVG;
 };
-declare type TabIconProps = TabCommonProps & {
+export declare type TabIconProps = TabCommonProps & {
     /**
      * Tab label.
      */
@@ -41,6 +41,16 @@ declare type TabIconProps = TabCommonProps & {
      */
     icon: string | SVG;
 };
+export declare type TabProps = {
+    tab: TabLabelProps | TabIconProps;
+    active: boolean;
+    tabIndex: number;
+    hasLabelAndIcon: boolean;
+    iconPosition: "top" | "left";
+    onClick: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+};
 declare type Props = {
     /**
      * An array of objects representing the tabs.

package/tabs-nav/NavTabs.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { NavTabsProps } from "./types";
+import { NavTabsContextProps, NavTabsProps } from "./types";
+export declare const NavTabsContext: React.Context<NavTabsContextProps>;
 declare const DxcNavTabs: {
     ({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;

package/tabs-nav/NavTabs.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.NavTabsContext = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -27,10 +27,25 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.NavTabsContext = NavTabsContext;
+
+var getPropInChild = function getPropInChild(child, propName) {
+  return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
+};
+
+var getLabelFromTab = function getLabelFromTab(child) {
+  if (typeof child === "string") {
+    return child.toString();
+  } else if (child.props.children) {
+    return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
+  }
+};
+
 var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
   var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
 
-  while (array[index].props.disabled) {
+  while (getPropInChild(array[index], "disabled")) {
     index = index === 0 ? array.length - 1 : index - 1;
   }
 
@@ -40,7 +55,7 @@ var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
 var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
   var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
 
-  while (array[index].props.disabled) {
+  while (getPropInChild(array[index], "disabled")) {
     index = index === array.length - 1 ? 0 : index + 1;
   }
 
@@ -60,22 +75,33 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
       innerFocus = _useState2[0],
       setInnerFocus = _useState2[1];
 
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      iconPosition: iconPosition,
+      tabIndex: tabIndex,
+      hasIcons: _react["default"].Children.toArray(children).some(function (child) {
+        return getPropInChild(child, "icon");
+      }),
+      focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
+    };
+  }, [iconPosition, tabIndex, innerFocus]);
+
   var handleOnKeyDown = function handleOnKeyDown(event) {
     var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
-      return child.props.active;
+      return getPropInChild(child, "active");
     });
 
-    switch (event.keyCode) {
-      case 37:
-        // arrow left
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
         event.preventDefault();
-        setInnerFocus(getPreviousTabIndex(_react["default"].Children.toArray(children), innerFocus === null ? activeTab : innerFocus));
+        setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;
 
-      case 39:
-        // arrow right
+      case "Right":
+      case "ArrowRight":
         event.preventDefault();
-        setInnerFocus(getNextTabIndex(_react["default"].Children.toArray(children), innerFocus === null ? activeTab : innerFocus));
+        setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;
     }
   };
@@ -86,16 +112,9 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     onKeyDown: handleOnKeyDown,
     role: "tablist",
     "aria-label": "Navigation tabs"
-  }, _react["default"].Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/_react["default"].cloneElement(child, {
-      iconPosition: iconPosition,
-      tabIndex: tabIndex,
-      hasIcons: _react["default"].Children.toArray(children).some(function (child) {
-        return child.props.icon;
-      }),
-      focused: index === innerFocus
-    });
-  })));
+  }, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
+    value: contextValue
+  }, children)));
 };
 
 DxcNavTabs.Tab = _Tab["default"];

package/tabs-nav/Tab.js

@@ -11,14 +11,22 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Badge = _interopRequireDefault(require("../badge/Badge"));
 
+var _NavTabs = require("./NavTabs");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
+var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
+
 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; }
@@ -33,27 +41,27 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
       _ref$notificationNumb = _ref.notificationNumber,
       notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
       children = _ref.children,
-      iconPosition = _ref.iconPosition,
-      tabIndex = _ref.tabIndex,
-      _ref$hasIcons = _ref.hasIcons,
-      hasIcons = _ref$hasIcons === void 0 ? false : _ref$hasIcons,
-      _ref$focused = _ref.focused,
-      focused = _ref$focused === void 0 ? false : _ref$focused;
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var tabRef = /*#__PURE__*/(0, _react.createRef)();
+
+  var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
+      iconPosition = _useContext.iconPosition,
+      tabIndex = _useContext.tabIndex,
+      hasIcons = _useContext.hasIcons,
+      focusedLabel = _useContext.focusedLabel;
+
   (0, _react.useLayoutEffect)(function () {
     var _tabRef$current;
 
-    focused && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
-  }, [focused]);
+    focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
+  }, [focusedLabel]);
 
   var handleOnKeyDown = function handleOnKeyDown(event) {
     var _tabRef$current2;
 
-    switch (event.keyCode) {
-      case 13: // enter
-
-      case 32:
-        // space
+    switch (event.key) {
+      case " ":
+      case "Enter":
         tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
         event.preventDefault();
         break;
@@ -64,18 +72,23 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     active: active,
     role: "tab",
     "aria-selected": active
-  }, /*#__PURE__*/_react["default"].createElement(Tab, {
+  }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
     href: !disabled && href ? href : undefined,
     disabled: disabled,
     iconPosition: iconPosition,
     hasIcon: hasIcons,
     ref: function ref(anchorRef) {
       tabRef.current = anchorRef;
-      return _ref2;
+
+      if (_ref2) {
+        if (typeof _ref2 === "function") _ref2(anchorRef);else {
+          _ref2.current = anchorRef;
+        }
+      }
     },
     onKeyDown: handleOnKeyDown,
     tabIndex: active ? tabIndex : -1
-  }, icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
+  }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
     iconPosition: iconPosition
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
     src: icon

package/tabs-nav/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 export declare type TabProps = {
     /**
      * Whether the tab is active or not.
@@ -29,10 +29,6 @@ export declare type TabProps = {
      * Content of the tab.
      */
     children: string;
-    iconPosition?: "top" | "left";
-    tabIndex?: number;
-    hasIcons?: boolean;
-    focused?: boolean;
 };
 export declare type NavTabsProps = {
     /**
@@ -48,4 +44,10 @@ export declare type NavTabsProps = {
      */
     children: React.ReactNode;
 };
+export declare type NavTabsContextProps = {
+    iconPosition: "top" | "left";
+    tabIndex: number;
+    hasIcons: boolean;
+    focusedLabel: string;
+};
 export {};

package/tag/Tag.js

@@ -99,7 +99,7 @@ var sizes = {
   medium: "240px",
   large: "480px",
   fillParent: "100%",
-  fitContent: "unset"
+  fitContent: "fit-content"
 };
 
 var calculateWidth = function calculateWidth(margin, size) {

package/tag/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type TagCommonProps = {
     /**
      * If defined, the tag will be displayed as an anchor, using this prop as "href".

package/text-input/Icons.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const icons: {
+    error: JSX.Element;
+    clear: JSX.Element;
+    increment: JSX.Element;
+    decrement: JSX.Element;
+};
+export default icons;

package/text-input/Icons.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var icons = {
+  error: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+  })),
+  clear: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+  })),
+  increment: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+  })),
+  decrement: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19 13H5v-2h14v2z"
+  }))
+};
+var _default = icons;
+exports["default"] = _default;