@dxc-technology/halstack-react 0.0.0-9d82cb9 → 0.0.0-9e25510

package/select/selectUtils.d.ts

@@ -0,0 +1,41 @@
+import { Option, OptionGroup } from "./types";
+/**
+ * Check if the value is not optional and is empty.
+ */
+declare const notOptionalCheck: (value: string | string[], multiple: boolean, optional: boolean) => boolean;
+/**
+ * Checks if the option is a group.
+ */
+declare const isOptionGroup: (option: Option | OptionGroup) => option is OptionGroup;
+/**
+ * Checks if the options are an array of groups.
+ */
+declare const isArrayOfOptionGroups: (options: Option[] | OptionGroup[]) => options is OptionGroup[];
+/**
+ * Checks if the groups have options.
+ */
+declare const groupsHaveOptions: (options: Option[] | OptionGroup[]) => boolean;
+/**
+ * Checks if the listbox can be opened.
+ */
+declare const canOpenListbox: (options: Option[] | OptionGroup[], disabled: boolean) => boolean;
+/**
+ * Filters the options by the search value.
+ */
+declare const filterOptionsBySearchValue: (options: Option[] | OptionGroup[], searchValue: string) => Option[] | OptionGroup[];
+/**
+ * Returns the index of the last option, depending on several conditions.
+ */
+declare const getLastOptionIndex: (options: Option[] | OptionGroup[], filteredOptions: Option[] | OptionGroup[], searchable: boolean, optional: boolean, multiple: boolean) => number;
+/**
+ * Return the current selection.
+ */
+declare const getSelectedOption: (value: string | string[], options: Option[] | OptionGroup[], multiple: boolean, optional: boolean, optionalItem: Option) => {
+    selectedOption: Option | Option[];
+    singleSelectionIndex: number;
+};
+/**
+ * Return the label or labels of the selected option(s) for the internal input.
+ */
+declare const getSelectedOptionLabel: (placeholder: string, selectedOption: Option | Option[]) => string;
+export { isOptionGroup, isArrayOfOptionGroups, notOptionalCheck, groupsHaveOptions, canOpenListbox as canOpenOptions, filterOptionsBySearchValue, getLastOptionIndex, getSelectedOption, getSelectedOptionLabel, };

package/select/selectUtils.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.notOptionalCheck = exports.isOptionGroup = exports.isArrayOfOptionGroups = exports.groupsHaveOptions = exports.getSelectedOptionLabel = exports.getSelectedOption = exports.getLastOptionIndex = exports.filterOptionsBySearchValue = exports.canOpenOptions = void 0;
+/**
+ * Check if the value is not optional and is empty.
+ */
+var notOptionalCheck = exports.notOptionalCheck = function notOptionalCheck(value, multiple, optional) {
+  return !optional && (multiple ? value.length === 0 : value === "");
+};
+
+/**
+ * Checks if the option is a group.
+ */
+var isOptionGroup = exports.isOptionGroup = function isOptionGroup(option) {
+  return "options" in option && option.options != null;
+};
+
+/**
+ * Checks if the options are an array of groups.
+ */
+var isArrayOfOptionGroups = exports.isArrayOfOptionGroups = function isArrayOfOptionGroups(options) {
+  return isOptionGroup(options[0]);
+};
+
+/**
+ * Checks if the groups have options.
+ */
+var groupsHaveOptions = exports.groupsHaveOptions = function groupsHaveOptions(options) {
+  return isArrayOfOptionGroups(options) ? options.some(function (groupOption) {
+    var _groupOption$options;
+    return ((_groupOption$options = groupOption.options) === null || _groupOption$options === void 0 ? void 0 : _groupOption$options.length) > 0;
+  }) : true;
+};
+
+/**
+ * Checks if the listbox can be opened.
+ */
+var canOpenListbox = exports.canOpenOptions = function canOpenListbox(options, disabled) {
+  return !disabled && (options === null || options === void 0 ? void 0 : options.length) > 0 && groupsHaveOptions(options);
+};
+
+/**
+ * Filters the options by the search value.
+ */
+var filterOptionsBySearchValue = exports.filterOptionsBySearchValue = function filterOptionsBySearchValue(options, searchValue) {
+  if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
+    if (isArrayOfOptionGroups(options)) return options.map(function (optionGroup) {
+      var group = {
+        label: optionGroup.label,
+        options: optionGroup.options.filter(function (option) {
+          return option.label.toUpperCase().includes(searchValue.toUpperCase());
+        })
+      };
+      return group;
+    });else return options.filter(function (option) {
+      return option.label.toUpperCase().includes(searchValue.toUpperCase());
+    });
+  }
+};
+
+/**
+ * Returns the index of the last option, depending on several conditions.
+ */
+var getLastOptionIndex = exports.getLastOptionIndex = function getLastOptionIndex(options, filteredOptions, searchable, optional, multiple) {
+  var last = 0;
+  var reducer = function reducer(acc, current) {
+    var _current$options;
+    return acc + ((_current$options = current.options) === null || _current$options === void 0 ? void 0 : _current$options.length);
+  };
+  if (searchable && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0) isArrayOfOptionGroups(filteredOptions) ? last = filteredOptions.reduce(reducer, 0) - 1 : last = filteredOptions.length - 1;else if ((options === null || options === void 0 ? void 0 : options.length) > 0) isArrayOfOptionGroups(options) ? last = options.reduce(reducer, 0) - 1 : last = options.length - 1;
+  return optional && !multiple ? last + 1 : last;
+};
+
+/**
+ * Return the current selection.
+ */
+var getSelectedOption = exports.getSelectedOption = function getSelectedOption(value, options, multiple, optional, optionalItem) {
+  var selectedOption = multiple ? [] : {};
+  var singleSelectionIndex;
+  if (multiple) {
+    if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
+      options.forEach(function (option) {
+        if (isOptionGroup(option)) option.options.forEach(function (singleOption) {
+          if (value.includes(singleOption.value) && Array.isArray(selectedOption)) selectedOption.push(singleOption);
+        });else if (value.includes(option.value) && Array.isArray(selectedOption)) selectedOption.push(option);
+      });
+    }
+  } else {
+    if (optional && value === "") {
+      selectedOption = optionalItem;
+      singleSelectionIndex = 0;
+    } else if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
+      var group_index = 0;
+      options.some(function (option, index) {
+        if (isOptionGroup(option)) {
+          option.options.some(function (singleOption) {
+            if (singleOption.value === value) {
+              selectedOption = singleOption;
+              singleSelectionIndex = optional ? group_index + 1 : group_index;
+              return true;
+            }
+            group_index++;
+          });
+        } else if (option.value === value) {
+          selectedOption = option;
+          singleSelectionIndex = optional ? index + 1 : index;
+          return true;
+        }
+      });
+    }
+  }
+  return {
+    selectedOption: selectedOption,
+    singleSelectionIndex: singleSelectionIndex
+  };
+};
+
+/**
+ * Return the label or labels of the selected option(s) for the internal input.
+ */
+var getSelectedOptionLabel = exports.getSelectedOptionLabel = function getSelectedOptionLabel(placeholder, selectedOption) {
+  var _selectedOption$label;
+  return Array.isArray(selectedOption) ? selectedOption.length === 0 ? placeholder : selectedOption.map(function (option) {
+    return option.label;
+  }).join(", ") : (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : placeholder;
+};

package/select/types.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+import React from "react";
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
-declare type OptionGroup = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type OptionGroup = {
     /**
      * Label of the group to be shown in the select's listbox.
      */
@@ -17,10 +17,10 @@ declare type OptionGroup = {
      */
     options: Option[];
 };
-declare type Option = {
+export type Option = {
     /**
      * Element used as the icon that will be placed before the option label.
-     * It can be a url of an image or an inline SVG. If the url option
+     * It can be an inline SVG or Material Symbol name. If the url option
      * is the chosen one, take into account that the component's
      * color styling tokens will not be applied to the image.
      */
@@ -36,7 +36,7 @@ declare type Option = {
      */
     value: string;
 };
-declare type CommonProps = {
+type CommonProps = {
     /**
      * Text to be placed above the select.
      */
@@ -45,15 +45,14 @@ declare type CommonProps = {
      * Name attribute of the input element. This attribute will allow users
      * to find the component's value during the submit event. In this event,
      * the component's value will always be a regular string, for both single
-     * and multiple selection modes, been in the first one a single option
-     * value and in the multiple variant more than one option value,
-     * separated by commas.
+     * and multiple selection modes, being a single option value in the first case
+     * and more than one value when multiple selection is available, separated by commas.
      */
     name?: string;
     /**
      * An array of objects representing the selectable options.
      */
-    options?: Option[] | OptionGroup[];
+    options: Option[] | OptionGroup[];
     /**
      * Helper text to be placed above the select.
      */
@@ -79,9 +78,12 @@ declare type CommonProps = {
      */
     searchable?: boolean;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the select component. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the select component.
+     * If the defined value is an empty string, it will reserve a space below
+     * the component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -98,13 +100,17 @@ declare type CommonProps = {
      */
     tabIndex?: number;
 };
-declare type SingleSelect = CommonProps & {
+type SingleSelect = CommonProps & {
     /**
      * If true, the select component will support multiple selected options.
      * In that case, value will be an array of strings with each selected
      * option value.
      */
     multiple?: false;
+    /**
+     * Initial value of the select, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Value of the select. If undefined, the component will be uncontrolled
      * and the value will be managed internally by the component.
@@ -113,30 +119,34 @@ declare type SingleSelect = CommonProps & {
     /**
      * This function will be called when the user selects an option.
      * An object including the current value and the error (if the value entered is not valid)
-     * will be passed to this function. If there is no error, error will be null.
+     * will be passed to this function. If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the select loses the focus. An
      * object including the value and the error (if the value
      * selected is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string;
+        error?: string;
     }) => void;
 };
-declare type MultipleSelect = CommonProps & {
+type MultipleSelect = CommonProps & {
     /**
      * If true, the select component will support multiple selected options.
      * In that case, value will be an array of strings with each selected
      * option value.
      */
     multiple: true;
+    /**
+     * Initial value of the select, only when it is uncontrolled.
+     */
+    defaultValue?: string[];
     /**
      * Value of the select. If undefined, the component will be uncontrolled
      * and the value will be managed internally by the component.
@@ -149,7 +159,7 @@ declare type MultipleSelect = CommonProps & {
      */
     onChange?: (val: {
         value: string[];
-        error: string;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the select loses the focus. An
@@ -159,12 +169,41 @@ declare type MultipleSelect = CommonProps & {
      */
     onBlur?: (val: {
         value: string[];
-        error: string;
+        error?: string;
     }) => void;
 };
-declare type Props = SingleSelect | MultipleSelect;
+type Props = SingleSelect | MultipleSelect;
+/**
+ * Single option of the select component.
+ */
+export type OptionProps = {
+    id: string;
+    option: Option;
+    onClick: (option: Option) => void;
+    multiple: boolean;
+    visualFocused: boolean;
+    isGroupedOption?: boolean;
+    isLastOption: boolean;
+    isSelected: boolean;
+};
+/**
+ * Listbox from the select component.
+ */
+export type ListboxProps = {
+    id: string;
+    currentValue: string | string[];
+    options: Option[] | OptionGroup[];
+    visualFocusIndex: number;
+    lastOptionIndex: number;
+    multiple: boolean;
+    optional: boolean;
+    optionalItem: Option;
+    searchable: boolean;
+    handleOptionOnClick: (option: Option) => void;
+    styles: React.CSSProperties;
+};
 /**
- * Reference to the component.
+ * Reference to the select component.
  */
-export declare type RefType = HTMLDivElement;
+export type RefType = HTMLDivElement;
 export default Props;

package/sidenav/Sidenav.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/sidenav/Sidenav.accessibility.test.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Sidenav = _interopRequireDefault(require("./Sidenav"));
+var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  version: "1.1",
+  x: "0px",
+  y: "0px",
+  width: "438.536px",
+  height: "438.536px",
+  viewBox: "0 0 438.536 438.536",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123\nC8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126\nh274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225\nC438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402\nc0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401\nc-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+})));
+describe("Sidenav component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], {
+            title: "Title"
+          }, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Section, null, /*#__PURE__*/_react["default"].createElement("p", null, "nav-content-test"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+            href: "#",
+            icon: iconSVG,
+            selected: true
+          }, "Link")), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Section, null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Group, {
+            title: "Collapsable",
+            icon: iconSVG,
+            collapsable: true
+          }, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+            href: "#"
+          }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+            href: "#"
+          }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+            href: "#"
+          }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+            href: "#"
+          }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+            href: "#"
+          }, "Lorem ipsum"))))), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/sidenav/Sidenav.d.ts

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