@dxc-technology/halstack-react 0.0.0-eb2a4cc → 0.0.0-eb9d984

package/text-input/Suggestion.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var Suggestion = function Suggestion(_ref) {
+  var id = _ref.id,
+      value = _ref.value,
+      onClick = _ref.onClick,
+      suggestion = _ref.suggestion,
+      isLast = _ref.isLast,
+      visuallyFocused = _ref.visuallyFocused,
+      highlighted = _ref.highlighted;
+  var regEx = new RegExp(value, "i");
+  var matchedWords = suggestion.match(regEx);
+  var noMatchedWords = suggestion.replace(regEx, "");
+  return /*#__PURE__*/_react["default"].createElement(SuggestionContainer, {
+    id: id,
+    onClick: onClick,
+    visuallyFocused: visuallyFocused,
+    role: "option",
+    "aria-selected": visuallyFocused ? "true" : undefined
+  }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
+    last: isLast,
+    visuallyFocused: visuallyFocused
+  }, highlighted ? suggestion : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords)));
+};
+
+var SuggestionContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0 0.5rem;\n  line-height: 1.715em;\n  cursor: pointer;\n\n  box-shadow: inset 0 0 0 2px\n    ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.visuallyFocused ? props.theme.focusListOptionBorderColor : "transparent";
+}, function (props) {
+  return props.theme.hoverListOptionBackgroundColor;
+}, function (props) {
+  return props.theme.activeListOptionBackgroundColor;
+});
+
+var StyledSuggestion = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n  ", ";\n"])), function (props) {
+  return props.last || props.visuallyFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
+});
+
+var _default = /*#__PURE__*/_react["default"].memo(Suggestion);
+
+exports["default"] = _default;

package/text-input/TextInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import TextInputPropsType from "./types";
+declare const DxcTextInput: React.ForwardRefExoticComponent<TextInputPropsType & React.RefAttributes<HTMLDivElement>>;
+export default DxcTextInput;