@pinuts/bsr-uikit-relaunch 0.3.3 → 0.3.8

package/dist/items/MultiSelectField/MultiSelectField.d.ts

@@ -0,0 +1,4 @@
+export default WrappedMultiSelectField;
+declare function WrappedMultiSelectField(props: any): React.JSX.Element;
+import React from 'react';
+//# sourceMappingURL=MultiSelectField.d.ts.map

package/dist/items/MultiSelectField/MultiSelectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectField.d.ts","sourceRoot":"","sources":["../../../src/items/MultiSelectField/MultiSelectField.jsx"],"names":[],"mappings":";AAuOA,wEAMC;kBA7OqD,OAAO"}

package/dist/items/MultiSelectField/MultiSelectField.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactI18next = require("react-i18next");
+var _react2 = require("@ariakit/react");
+var _formBuilder = require("@pinuts/form-builder");
+var _useGetOptionList = _interopRequireDefault(require("../../hooks/useGetOptionList.js"));
+var _index = require("../../utils/index.js");
+var _FormFieldChildPropTypes = _interopRequireDefault(require("../FormFieldWrapper/FormFieldChildPropTypes.jsx"));
+var _FormFieldWrapper = _interopRequireDefault(require("../FormFieldWrapper/FormFieldWrapper.jsx"));
+var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // form-builder
+const {
+  useFormikContext
+} = _formBuilder.formik;
+const toArray = value => {
+  if (Array.isArray(value)) return value;
+  if (value === undefined || value === null || value === '') return [];
+  return [value];
+};
+const MultiSelectField = _ref => {
+  let {
+    className,
+    options,
+    emptyOptionLabel,
+    skipOptions,
+    inputProps = {},
+    field = {},
+    onChange = () => {},
+    value,
+    isInvalid,
+    readOnly,
+    disabled,
+    viewMode,
+    ariaAttributes = {},
+    allowCustom,
+    dark,
+    disableDropdown,
+    doSubmitOnChange,
+    placeholder
+  } = _ref;
+  const [t] = (0, _reactI18next.useTranslation)();
+  const {
+    submitForm
+  } = useFormikContext();
+  const [searchInput, setSearchInput] = (0, _react.useState)('');
+  const inputOptions = (0, _useGetOptionList.default)(options, emptyOptionLabel, skipOptions);
+  const selectedValues = (0, _react.useMemo)(() => toArray(value), [value]);
+  const translateLabel = (0, _react.useCallback)(function () {
+    let label = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return !label.includes(':') && !label.includes('<') ? t(label) : label;
+  }, [t]);
+  const selectedOptions = (0, _react.useMemo)(() => selectedValues.map(val => inputOptions.find(opt => opt.value === val) || {
+    value: val,
+    label: val
+  }), [selectedValues, inputOptions]);
+  const filteredOptions = (0, _react.useMemo)(() => {
+    const search = searchInput.trim().toLowerCase();
+    if (!search) return inputOptions;
+    return inputOptions.filter(opt => translateLabel(opt.label).toString().toLowerCase().includes(search));
+  }, [inputOptions, searchInput, translateLabel]);
+  const triggerChange = (0, _react.useCallback)(next => {
+    onChange(next);
+    if (doSubmitOnChange) submitForm();
+  }, [onChange, doSubmitOnChange, submitForm]);
+  const handleSelectionChange = (0, _react.useCallback)(next => {
+    triggerChange(Array.isArray(next) ? next : toArray(next));
+    setSearchInput('');
+  }, [triggerChange]);
+  const removeValue = (0, _react.useCallback)(val => triggerChange(selectedValues.filter(v => v !== val)), [triggerChange, selectedValues]);
+  const clearAll = (0, _react.useCallback)(() => triggerChange([]), [triggerChange]);
+  const onInputKeyDown = (0, _react.useCallback)(event => {
+    const {
+      key,
+      currentTarget
+    } = event;
+    const isCaretAtStart = currentTarget.selectionStart === 0 && currentTarget.selectionEnd === 0;
+    if (key === 'Backspace' && isCaretAtStart && selectedValues.length > 0) {
+      triggerChange(selectedValues.slice(0, -1));
+      return;
+    }
+    if (allowCustom && (key === 'Enter' || key === ',')) {
+      const typed = currentTarget.value.trim();
+      if (typed && !selectedValues.includes(typed)) {
+        event.preventDefault();
+        triggerChange([...selectedValues, typed]);
+        setSearchInput('');
+      }
+    }
+  }, [allowCustom, selectedValues, triggerChange]);
+  if (viewMode) {
+    return selectedOptions.map(opt => translateLabel(opt.label)).join(', ');
+  }
+  const wrapperClassNames = (0, _index.getFormControlClassNames)(isInvalid, readOnly, disabled, className, ['multiSelectField', dark && 'dark', field.className].filter(Boolean));
+  return /*#__PURE__*/_react.default.createElement(_react2.ComboboxProvider, {
+    value: searchInput,
+    setValue: setSearchInput,
+    selectedValue: selectedValues,
+    setSelectedValue: handleSelectionChange,
+    defaultSelectedValue: [],
+    resetValueOnSelect: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClassNames
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "multiSelectField__row"
+  }, selectedOptions.map(opt => /*#__PURE__*/_react.default.createElement("button", {
+    key: opt.value,
+    type: "button",
+    className: "multiSelectField__tag",
+    onClick: () => removeValue(opt.value),
+    disabled: readOnly || disabled,
+    "aria-label": t('aria.deleteField', {
+      label: translateLabel(opt.label)
+    })
+  }, translateLabel(opt.label), /*#__PURE__*/_react.default.createElement("span", {
+    className: "multiSelectField__tagRemove",
+    "aria-hidden": "true"
+  }, "\u2715"))), /*#__PURE__*/_react.default.createElement(_react2.Combobox, _extends({
+    autoSelect: true,
+    placeholder: placeholder,
+    onKeyDown: onInputKeyDown
+  }, ariaAttributes, inputProps))), selectedValues.length > 0 && !readOnly && !disabled && /*#__PURE__*/_react.default.createElement(_react2.ComboboxCancel, {
+    className: "multiSelectField__cancel",
+    onClick: clearAll,
+    "aria-label": t('aria.deleteAll')
+  })), !disableDropdown && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.ComboboxPopover, {
+    portal: true,
+    sameWidth: true,
+    gutter: 4,
+    className: "multiSelectFieldPopover"
+  }, filteredOptions.map(opt => /*#__PURE__*/_react.default.createElement(_react2.ComboboxItem, {
+    key: opt.value,
+    value: opt.value,
+    focusOnHover: true
+  }, translateLabel(opt.label)))));
+};
+MultiSelectField.propTypes = {
+  ..._FormFieldChildPropTypes.default,
+  options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
+  }), _propTypes.default.string])).isRequired,
+  emptyOptionLabel: _propTypes.default.string,
+  skipOptions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.string]),
+  allowCustom: _propTypes.default.bool,
+  dark: _propTypes.default.bool,
+  disableDropdown: _propTypes.default.bool,
+  doSubmitOnChange: _propTypes.default.bool,
+  placeholder: _propTypes.default.string
+};
+const HigherOrderMultiSelectField = (0, _withFieldGroup.default)(MultiSelectField);
+const WrappedMultiSelectField = props => {
+  return /*#__PURE__*/_react.default.createElement(_FormFieldWrapper.default, props, /*#__PURE__*/_react.default.createElement(HigherOrderMultiSelectField, props));
+};
+(0, _formBuilder.registerComponent)('MultiSelectField', WrappedMultiSelectField);
+(0, _formBuilder.registerComponent)('MultiSelectFieldBasic', HigherOrderMultiSelectField);
+var _default = exports.default = WrappedMultiSelectField;

package/dist/items/index.d.ts

@@ -9,6 +9,7 @@ import FormFieldWrapper from './FormFieldWrapper/FormFieldWrapper.jsx';
 import GroupInputField from './GroupInputField/GroupInputField.jsx';
 import Icon from '../assets/Icon.jsx';
 import FormBuilderIcon from './Icon/Icon.jsx';
+import MultiSelectField from './MultiSelectField/MultiSelectField.jsx';
 import NumberInputField from './NumberInputField/NumberInputField.jsx';
 import SelectField from './SelectField/SelectField.jsx';
 import StaticAlert from './StaticAlert/StaticAlert.jsx';
@@ -31,5 +32,5 @@ import EventDatePicker from './eventWizardItems/EventDatePicker/EventDatePicker.
 import FormTitle from './eventWizardItems/FormTitle/FormTitle.jsx';
 import Intro from './eventWizardItems/Intro/Intro.jsx';
 import Required from './eventWizardItems/Required/Required.jsx';
-export { Button, BSRAddressSelector, SubmitButton, DateInputField, DropDownButton, FieldLabel, FormFieldChildPropTypes, FormFieldWrapper, GroupInputField, Icon, FormBuilderIcon, NumberInputField, SelectField, StaticAlert, Tag, TextBox, TextAreaField, TextInputField, Toast, Title, ToggleSwitchField, SectionSpinner, ArrayFieldset, FieldsetWrapper, BootstrapInputGroupField, BSRGridRow, BSRGridColumn, BSRGridRowCols, EventPicker, EventDatePicker, FormTitle, Intro, Required };
+export { Button, BSRAddressSelector, SubmitButton, DateInputField, DropDownButton, FieldLabel, FormFieldChildPropTypes, FormFieldWrapper, GroupInputField, Icon, FormBuilderIcon, MultiSelectField, NumberInputField, SelectField, StaticAlert, Tag, TextBox, TextAreaField, TextInputField, Toast, Title, ToggleSwitchField, SectionSpinner, ArrayFieldset, FieldsetWrapper, BootstrapInputGroupField, BSRGridRow, BSRGridColumn, BSRGridRowCols, EventPicker, EventDatePicker, FormTitle, Intro, Required };
 //# sourceMappingURL=index.d.ts.map

package/dist/items/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/items/index.js"],"names":[],"mappings":"mBAKmB,qBAAqB;+BAHT,6CAA6C;yBAInD,2BAA2B;2BACzB,qCAAqC;2BACrC,qCAAqC;uBACzC,6BAA6B;oCAChB,gDAAgD;6BACvD,yCAAyC;4BAC1C,uCAAuC;iBAClD,oBAAoB;4BACT,iBAAiB;6BAGhB,yCAAyC;wBAC9C,+BAA+B;wBAC/B,+BAA+B;gBAfvC,eAAe;oBAkBX,uBAAuB;0BACjB,mCAAmC;2BAClC,qCAAqC;kBAG9C,mBAAmB;kBADnB,mBAAmB;8BAEP,2CAA2C;2BAP9C,qCAAqC;0BAStC,mCAAmC;4BACjC,uCAAuC;qCAN9B,yDAAyD;uBAOvE,uBAAuB;0BACpB,0BAA0B;2BACzB,2BAA2B;wBAC9B,gDAAgD;4BAC5C,wDAAwD;sBAC9D,4CAA4C;kBAChD,oCAAoC;qBACjC,0CAA0C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/items/index.js"],"names":[],"mappings":"mBAKmB,qBAAqB;+BAHT,6CAA6C;yBAInD,2BAA2B;2BACzB,qCAAqC;2BACrC,qCAAqC;uBACzC,6BAA6B;oCAChB,gDAAgD;6BACvD,yCAAyC;4BAC1C,uCAAuC;iBAClD,oBAAoB;4BACT,iBAAiB;6BAGhB,yCAAyC;6BACzC,yCAAyC;wBAC9C,+BAA+B;wBAC/B,+BAA+B;gBAhBvC,eAAe;oBAmBX,uBAAuB;0BACjB,mCAAmC;2BAClC,qCAAqC;kBAG9C,mBAAmB;kBADnB,mBAAmB;8BAEP,2CAA2C;2BAP9C,qCAAqC;0BAStC,mCAAmC;4BACjC,uCAAuC;qCAN9B,yDAAyD;uBAOvE,uBAAuB;0BACpB,0BAA0B;2BACzB,2BAA2B;wBAC9B,gDAAgD;4BAC5C,wDAAwD;sBAC9D,4CAA4C;kBAChD,oCAAoC;qBACjC,0CAA0C"}

package/dist/items/index.js

@@ -123,6 +123,12 @@ Object.defineProperty(exports, "Intro", {
     return _Intro.default;
   }
 });
+Object.defineProperty(exports, "MultiSelectField", {
+  enumerable: true,
+  get: function () {
+    return _MultiSelectField.default;
+  }
+});
 Object.defineProperty(exports, "NumberInputField", {
   enumerable: true,
   get: function () {
@@ -213,6 +219,7 @@ var _FormFieldWrapper = _interopRequireDefault(require("./FormFieldWrapper/FormF
 var _GroupInputField = _interopRequireDefault(require("./GroupInputField/GroupInputField.jsx"));
 var _Icon = _interopRequireDefault(require("../assets/Icon.jsx"));
 var _Icon2 = _interopRequireDefault(require("./Icon/Icon.jsx"));
+var _MultiSelectField = _interopRequireDefault(require("./MultiSelectField/MultiSelectField.jsx"));
 var _NumberInputField = _interopRequireDefault(require("./NumberInputField/NumberInputField.jsx"));
 var _SelectField = _interopRequireDefault(require("./SelectField/SelectField.jsx"));
 var _StaticAlert = _interopRequireDefault(require("./StaticAlert/StaticAlert.jsx"));

package/dist/styles/_ariakit_combobox.scss

@@ -161,110 +161,182 @@
   background-color: $bsr-grey-100;
 }
 
-// Tags for MultiSelectField
-.tagGrid {
+// MultiSelectField
+.multiSelectField {
+  position: relative;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
   width: 100%;
-  height: fit-content;
-  min-height: 3rem;
-  padding: 0;
+  min-height: 45px;
+  padding: ($base-gap) ($base-gap * 2);
+  gap: $base-gap;
+  background-color: $bsr-white-100;
+  border: $bsr-border-width-s solid $bsr-grey-100;
+  border-radius: $border-radius-sm;
+  font-family: "TradeGothicNext", "TradeGothicNextSR", sans-serif;
+  font-size: $inputField-font-size;
+  line-height: $inputField-line-height;
+  color: $bsr-black-90;
+  cursor: text;
 
-  &.focused,
-  &:focus-within,
-  &:focus {
-    box-shadow: $bsr-shadow-default !important;
-    background-color: $white;
+  &:focus-within {
+    border-color: $bsr-black-90;
+    outline: $bsr-border-width-m solid $bsr-black-90;
   }
 
-  .inputRow {
-    width: 100%;
-    overflow: auto;
+  &.error {
+    border-color: transparent;
+    outline: $bsr-border-width-l solid $bsr-border-color-error;
+  }
+
+  &.read-only,
+  &.disabled {
+    background-color: $bsr-black-10;
+    color: $bsr-black-60;
+    cursor: not-allowed;
+  }
+
+  &.dark {
+    background-color: $bsr-light-brown-100;
+    color: $bsr-white-100;
+  }
+
+  .multiSelectField__row {
     display: flex;
     flex-wrap: wrap;
-    max-height: 3rem;
+    align-items: center;
+    flex: 1 1 auto;
+    gap: $base-gap;
+    min-width: 0;
+  }
 
-    .tag {
-      background-color: $bsr-grey-100;
-      border: 0;
-      border-radius: 1rem;
-      margin-inline: 0.25rem;
-      margin-block: 0.25rem;
+  .multiSelectField__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: $base-gap;
+    margin: 0;
+    padding: 0 ($base-gap * 2);
+    min-height: calc(45px - #{$base-gap * 4});
+    background-color: $bsr-white-100;
+    color: $bsr-black-90;
+    border: $bsr-border-width-s solid $bsr-grey-100;
+    border-radius: $border-radius-lg * 2;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.2;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+      background-color: $bsr-black-10;
+    }
 
-      &:first-child {
-        margin-inline-start: 0.5rem;
-      }
+    &:focus-visible {
+      outline: $bsr-border-width-m solid $bsr-black-90;
+      outline-offset: 1px;
     }
 
-    .tagRemove {
-      padding-inline-start: 0.5rem;
+    &:disabled {
+      cursor: default;
+      color: $bsr-black-40;
+      border-color: $bsr-black-40;
+      background-color: transparent;
+    }
+
+    .multiSelectField__tagRemove {
       font-weight: 600;
-      font-size: 0.8rem;
+      font-size: 0.8em;
+      color: $bsr-grey-100;
     }
+  }
+
+  // input rendered by ariakit Combobox – neutralize global form input styles
+  input[role="combobox"] {
+    flex: 1 1 80px;
+    min-width: 80px;
+    width: auto;
+    margin: 0;
+    padding: 0 $base-gap;
+    background: transparent;
+    border: 0;
+    outline: 0;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    box-shadow: none;
 
-    .combobox {
+    &:focus,
+    &:focus-visible,
+    &:active {
       border: 0;
-      padding: 0.375rem 0.75rem;
-      border-radius: 0.25rem;
-      flex-grow: 1;
+      outline: 0;
+      box-shadow: none;
+    }
+  }
 
-      &:focus,
-      &:active,
-      &:hover {
-        outline: none;
-      }
+  .multiSelectField__cancel {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: 0;
+    color: $bsr-grey-100;
+    cursor: pointer;
+
+    &::before {
+      content: "✕";
+      font-size: 0.9em;
+      line-height: 1;
+    }
+
+    &:hover,
+    &:focus-visible {
+      color: $bsr-black-90;
+    }
+
+    svg {
+      display: none;
     }
   }
 }
 
-.comboboxMultiSelectPopover {
-  position: relative;
-  top: -2px;
-  z-index: 10000;
+.multiSelectFieldPopover {
+  z-index: 1000;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  max-height: min(var(--popover-available-height, 320px), 320px);
+  overflow-y: auto;
   overscroll-behavior: contain;
-  //border: 1px solid $popover-border-color !important;
-  border-radius: $border-radius;
-
-  background-color: $white;
-  padding: 0.4rem;
-  padding-top: 0.4rem;
-  color: hsl(204 4% 0%);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  //box-shadow: $popover-box-shadow;
-  //max-height: $popover-max-height;
-
-  div[data-active-item="true"] {
-    box-shadow: $bsr-shadow-default;
-    border-color: $primary;
-    outline: 0;
-  }
+  padding: $base-gap;
+  background-color: $bsr-white-100;
+  border: $bsr-border-width-s solid $bsr-grey-100;
+  border-radius: $border-radius-sm;
+  box-shadow: $bsr-shadow-default;
+  font-family: "TradeGothicNext", "TradeGothicNextSR", sans-serif;
+  font-size: $inputField-font-size;
+  line-height: $inputField-line-height;
+  color: $bsr-black-90;
+
   div[role="option"] {
-    font-weight: 600;
-    border-radius: 0.25rem;
-    padding: 0.25rem;
+    padding: ($base-gap * 2) ($base-gap * 3);
+    border-radius: $border-radius-sm;
+    cursor: pointer;
+    white-space: normal;
 
-    &:focus,
-    &:hover {
+    &:hover,
+    &[data-active-item] {
       background-color: $bsr-black-10;
-      color: $bsr-black-90;
-      cursor: pointer;
     }
 
     &[aria-selected="true"] {
-      background-color: $primary;
-      color: $white;
-      border-color: $primary;
-      outline: 0;
-    }
-
-    &:not(:last-child) {
-      margin-bottom: 0.25rem;
+      background-color: $bsr-grey-100;
+      color: $bsr-white-100;
     }
   }
 }

package/dist/styles/variables/_buttons.scss

@@ -109,7 +109,7 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
       border-color: $bsr-brick-100 !important;
     }
   }
-  &:focus {
+  &:focus-visible {
     background-color: $bsr-white-100 !important;
     color: $bsr-black-90 !important;
     box-shadow: 0 0 0 0.25rem rgba($bsr-white-100, 0.5) !important;
@@ -143,7 +143,7 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
   text-decoration: none;
 
   &:hover,
-  &:focus,
+  &:focus-visible,
   &:active {
     background-color: $white !important;
     color: $text-secondary !important;
@@ -170,7 +170,7 @@ button[type="button"].btn.btn-primary, button[type="button"].btn.btn-secondary {
     &:focus-visible {
         text-decoration-color: currentColor;
     }
-    
+
     &:focus,
     &:focus-visible {
         outline: none;
@@ -193,7 +193,7 @@ button[type="button"].btn.btn-secondary {
     background-color: $bsr-white-100;
     color: $bsr-brick-100;
     border: $bsr-border-width-m solid $bsr-brick-100;
-    
+
     &:hover,
     &:focus-visible {
         background-color: $bsr-brick-100 !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinuts/bsr-uikit-relaunch",
-  "version": "0.3.3",
+  "version": "0.3.8",
   "private": false,
   "description": "BSR UI-KIT Relaunch",
   "main": "dist/index.js",