@dxc-technology/halstack-react 9.0.0 → 9.1.0

package/select/Select.test.js

@@ -8,12 +8,12 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Select = _interopRequireDefault(require("./Select"));
-
 var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _Select = _interopRequireDefault(require("./Select.tsx"));
+
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -47,7 +47,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   return ResizeObserver;
 }();
 
-var single_options = [{
+var singleOptions = [{
   label: "Option 01",
   value: "1"
 }, {
@@ -108,7 +108,7 @@ var single_options = [{
   label: "Option 20",
   value: "20"
 }];
-var svg_icon_options = [{
+var svgIconOptions = [{
   label: "3G Mobile",
   value: "1",
   icon: /*#__PURE__*/_react["default"].createElement("svg", {
@@ -172,7 +172,7 @@ var svg_icon_options = [{
   label: "Regular",
   value: "Regular"
 }];
-var url_icon_options = [{
+var urlIconOptions = [{
   label: "Instagram",
   value: "1",
   icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png"
@@ -192,7 +192,7 @@ var url_icon_options = [{
   value: "5",
   icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png"
 }];
-var group_options = [{
+var groupOptions = [{
   label: "Colores",
   options: [{
     label: "Azul",
@@ -256,7 +256,7 @@ var group_options = [{
     value: "ebro"
   }]
 }];
-var grouped_icon_options = [{
+var groupedIconOptions = [{
   label: "Social Media",
   options: [{
     label: "Instagram",
@@ -336,7 +336,7 @@ describe("Select component tests", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Example",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render3.getByText,
         getByRole = _render3.getByRole;
@@ -362,7 +362,7 @@ describe("Select component tests", function () {
       label: "test-select-label",
       name: "test",
       defaultValue: "4",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render4.getByText,
         getByRole = _render4.getByRole,
@@ -390,7 +390,7 @@ describe("Select component tests", function () {
       label: "test-select-label",
       name: "test",
       defaultValue: ["4", "2", "6"],
-      options: single_options,
+      options: singleOptions,
       multiple: true
     })),
         getByText = _render5.getByText,
@@ -432,7 +432,7 @@ describe("Select component tests", function () {
       name: "options",
       label: "test-select-label",
       defaultValue: ["1", "5"],
-      options: single_options,
+      options: singleOptions,
       multiple: true
     }), /*#__PURE__*/_react["default"].createElement("button", {
       type: "submit"
@@ -454,7 +454,7 @@ describe("Select component tests", function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
-      options: single_options,
+      options: singleOptions,
       disabled: true
     })),
         getByRole = _render7.getByRole,
@@ -472,7 +472,7 @@ describe("Select component tests", function () {
     var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
-      options: single_options,
+      options: singleOptions,
       disabled: true,
       searchable: true,
       multiple: true
@@ -489,7 +489,7 @@ describe("Select component tests", function () {
 
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       disabled: true,
       onBlur: onBlur
     })),
@@ -512,7 +512,7 @@ describe("Select component tests", function () {
     var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
-      options: single_options,
+      options: singleOptions,
       disabled: true,
       searchable: true,
       multiple: true
@@ -540,7 +540,7 @@ describe("Select component tests", function () {
     }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       defaultValue: "1",
-      options: single_options,
+      options: singleOptions,
       disabled: true
     }), /*#__PURE__*/_react["default"].createElement("button", {
       type: "submit"
@@ -557,7 +557,7 @@ describe("Select component tests", function () {
 
     var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       onBlur: onBlur
     })),
@@ -599,7 +599,7 @@ describe("Select component tests", function () {
 
     var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       onBlur: onBlur,
       multiple: true
@@ -664,7 +664,7 @@ describe("Select component tests", function () {
 
     var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       onBlur: onBlur,
       optional: true
@@ -687,7 +687,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Opens listbox and renders correctly or closes it with a click on select", function () {
     var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render15.getByText,
         getByRole = _render15.getByRole,
@@ -732,7 +732,7 @@ describe("Select component tests", function () {
     var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange
     })),
         getByText = _render17.getByText,
@@ -765,7 +765,7 @@ describe("Select component tests", function () {
     var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       optional: true
     })),
@@ -821,7 +821,7 @@ describe("Select component tests", function () {
     var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Placeholder example",
-      options: single_options,
+      options: singleOptions,
       optional: true,
       searchable: true
     })),
@@ -849,7 +849,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Renders SVG icons correctly when passed with options", function () {
     var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: svg_icon_options
+      options: svgIconOptions
     })),
         getByRole = _render20.getByRole,
         getAllByRole = _render20.getAllByRole;
@@ -864,7 +864,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Renders string url icons correctly when passed with options", function () {
     var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: url_icon_options,
+      options: urlIconOptions,
       optional: true
     })),
         getByRole = _render21.getByRole,
@@ -880,7 +880,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
     var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByRole = _render22.getByRole,
         queryByRole = _render22.queryByRole;
@@ -900,7 +900,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
     var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByRole = _render23.getByRole,
         queryByRole = _render23.queryByRole;
@@ -927,7 +927,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
     var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByRole = _render24.getByRole,
         queryByRole = _render24.queryByRole;
@@ -947,7 +947,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
     var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByRole = _render25.getByRole,
         queryByRole = _render25.queryByRole;
@@ -976,7 +976,7 @@ describe("Select component tests", function () {
 
     var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       optional: true
     })),
@@ -1037,7 +1037,7 @@ describe("Select component tests", function () {
 
     var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1074,7 +1074,7 @@ describe("Select component tests", function () {
 
     var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1098,7 +1098,7 @@ describe("Select component tests", function () {
 
     var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1130,7 +1130,7 @@ describe("Select component tests", function () {
 
     var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1156,7 +1156,7 @@ describe("Select component tests", function () {
 
     var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1184,7 +1184,7 @@ describe("Select component tests", function () {
 
     var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1214,7 +1214,7 @@ describe("Select component tests", function () {
     var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       multiple: true
     })),
@@ -1275,7 +1275,7 @@ describe("Select component tests", function () {
 
     var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       multiple: true
     })),
@@ -1323,7 +1323,7 @@ describe("Select component tests", function () {
     var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       multiple: true,
       optional: true
@@ -1351,7 +1351,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
     var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render36.getByText,
         getByRole = _render36.getByRole,
@@ -1425,7 +1425,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", function () {
     var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render37.getByText,
         getByRole = _render37.getByRole,
@@ -1500,7 +1500,7 @@ describe("Select component tests", function () {
   test("Grouped Options - Opens listbox and renders it correctly or closes it with a click on select", function () {
     var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByText = _render38.getByText,
         getByRole = _render38.getByRole,
@@ -1556,7 +1556,7 @@ describe("Select component tests", function () {
     var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange
     })),
         getByText = _render40.getByText,
@@ -1589,7 +1589,7 @@ describe("Select component tests", function () {
     var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Placeholder example",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       optional: true
     })),
@@ -1645,7 +1645,7 @@ describe("Select component tests", function () {
     var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Placeholder example",
-      options: group_options,
+      options: groupOptions,
       optional: true,
       searchable: true
     })),
@@ -1673,7 +1673,7 @@ describe("Select component tests", function () {
   test("Grouped Options - Renders icons correctly when passed with group options", function () {
     var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: grouped_icon_options,
+      options: groupedIconOptions,
       optional: true
     })),
         getByRole = _render43.getByRole,
@@ -1689,7 +1689,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
     var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByRole = _render44.getByRole,
         queryByRole = _render44.queryByRole;
@@ -1709,7 +1709,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
     var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByRole = _render45.getByRole,
         queryByRole = _render45.queryByRole;
@@ -1736,7 +1736,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
     var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByRole = _render46.getByRole,
         queryByRole = _render46.queryByRole;
@@ -1756,7 +1756,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
     var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByRole = _render47.getByRole,
         queryByRole = _render47.queryByRole;
@@ -1785,7 +1785,7 @@ describe("Select component tests", function () {
 
     var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       optional: true
     })),
@@ -1846,7 +1846,7 @@ describe("Select component tests", function () {
 
     var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1889,7 +1889,7 @@ describe("Select component tests", function () {
 
     var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1914,7 +1914,7 @@ describe("Select component tests", function () {
     var _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       multiple: true
     })),
@@ -1975,7 +1975,7 @@ describe("Select component tests", function () {
 
     var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       multiple: true
     })),
@@ -2021,7 +2021,7 @@ describe("Select component tests", function () {
     var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       multiple: true,
       optional: true
@@ -2049,7 +2049,7 @@ describe("Select component tests", function () {
   test("Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
     var _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByText = _render54.getByText,
         getByRole = _render54.getByRole,
@@ -2123,7 +2123,7 @@ describe("Select component tests", function () {
   test("Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", function () {
     var _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByText = _render55.getByText,
         getByRole = _render55.getByRole,
@@ -2196,7 +2196,7 @@ describe("Select component tests", function () {
 
     var _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       multiple: true,
       optional: true

package/sidenav/Icons.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const icons: {
+    collapsedIcon: JSX.Element;
+    collapsableIcon: JSX.Element;
+    externalLinkIcon: JSX.Element;
+};
+export default icons;

package/sidenav/Icons.js

@@ -0,0 +1,51 @@
+"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 = {
+  collapsedIcon: /*#__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: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+  })),
+  collapsableIcon: /*#__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: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
+  })),
+  externalLinkIcon: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+  }))
+};
+var _default = icons;
+exports["default"] = _default;

package/sidenav/Sidenav.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import SidenavPropsType, { SidenavGroupPropsType, SidenavLinkPropsType, SidenavSectionPropsType, SidenavTitlePropsType } from "./types.js";
 declare const DxcSidenav: {
-    ({ children, title }: SidenavPropsType): JSX.Element;
+    ({ title, children }: SidenavPropsType): JSX.Element;
     Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
-    Group: ({ children, title, collapsable, icon }: SidenavGroupPropsType) => JSX.Element;
+    Group: ({ title, collapsable, icon, children }: SidenavGroupPropsType) => JSX.Element;
     Link: React.ForwardRefExoticComponent<SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
     Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
 };