@uncinc/uncinc-react-kitchen-sink 2.24.1 → 2.25.0

package/dist/components/Form/Select/Input/index.js

@@ -1,9 +1,15 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["fieldName", "id", "validation", "defaultValue", "onChange", "options", "placeholder", "disabled", "className", "wrapperClassName", "isClearable", "isSearchable", "multiple", "size", "required"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
-import SelectStyled from 'react-select';
+import SelectStyled, { components as ReactSelectComponents } from 'react-select';
 import c from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -21,6 +27,35 @@ var SelectInputOption = function SelectInputOption(props) {
     })
   );
 };
+
+// react-select renders the clear button as aria-hidden div by default.
+// Replace it with a proper <button> so keyboard users can reach it.
+var ClearIndicator = function ClearIndicator(_ref) {
+  var _ref$innerProps = _ref.innerProps,
+    onMouseDown = _ref$innerProps.onMouseDown,
+    onTouchEnd = _ref$innerProps.onTouchEnd,
+    selectProps = _ref.selectProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var selectedValue = selectProps === null || selectProps === void 0 ? void 0 : selectProps.value;
+  var selectedLabel = Array.isArray(selectedValue) ? selectedValue.map(function (v) {
+    return v.label;
+  }).join(', ') : selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label;
+  var ariaLabel = selectedLabel ? t('select.clear_with_value', {
+    value: selectedLabel,
+    defaultValue: "Wis de zoekopdracht, met ".concat(selectedLabel)
+  }) : (selectProps === null || selectProps === void 0 ? void 0 : selectProps.clearLabel) || t('select.clear', {
+    defaultValue: 'Wissen'
+  });
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "Select__inner__indicator Select__inner__clear-indicator",
+    onMouseDown: onMouseDown,
+    onTouchEnd: onTouchEnd,
+    onClick: onMouseDown,
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement(ReactSelectComponents.CrossIcon, null));
+};
 var SelectInput = function SelectInput(props) {
   var fieldName = props.fieldName,
     id = props.id,
@@ -45,8 +80,8 @@ var SelectInput = function SelectInput(props) {
   var _useExtendedFormikCon = useExtendedFormikContext(),
     values = _useExtendedFormikCon.values,
     setFieldValue = _useExtendedFormikCon.setFieldValue;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var _useTranslation2 = useTranslation(),
+    t = _useTranslation2.t;
   var value = getNestedFieldvalue(fieldName, values);
 
   // Check if options is [{value, label}] or {value: label}.
@@ -89,7 +124,11 @@ var SelectInput = function SelectInput(props) {
     value: value,
     validate: handleValidation
   }, function () {
-    return /*#__PURE__*/React.createElement(SelectStyled, _extends({}, restProps, {
+    return /*#__PURE__*/React.createElement(SelectStyled, _extends({
+      components: _objectSpread({
+        ClearIndicator: ClearIndicator
+      }, restProps.components)
+    }, restProps, {
       id: id,
       inputId: fieldName,
       className: c('Select__select', className),

package/dist/components/Form/Select/Input/style.scss

@@ -1,28 +1,49 @@
 @import '../../../../styles/assets/variables';
 @import '../../../../styles/assets/mixins';
 
+.Select__inner__clear-indicator {
+  display: flex;
+  align-items: center;
+  padding: 0 0.8rem;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  color: var(--color--primary, #{$color--primary});
+
+  &:focus-visible {
+    z-index: 1;
+    outline: 0.2rem solid var(--border--color--focus);
+    outline-offset: 0;
+    border-radius: 2px;
+  }
+}
+
 .Select {
   &__inner {
+
     &__control {
       border-radius: 0;
+
       &--menu-is-open,
       &--is-focused {
         border-color: inherit;
         box-shadow: none;
+
         &:hover,
         &:focus {
           border-color: inherit;
           box-shadow: none;
         }
-
       }
     }
+
     &__option {
       &--is-selected {
         background-color: transparent;
         color: $color--primary;
       }
     }
+
     &__menu {
       border-radius: 0;
       margin-top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.24.1",
+  "version": "2.25.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",