@invoicebox/ui 0.1.0-alpha.239 → 0.1.0-alpha.241

package/dist/components/form/TagsInput/index.d.ts

@@ -5,6 +5,7 @@ import { TTagsInputPalette } from './palette';
 export type TProps = Pick<TInputLabelProps, 'label'> & {
     hasError?: boolean;
 } & {
+    saveLabel: string;
     value?: Array<string>;
     onChange: (value?: Array<string>) => void;
     size?: TSizes;

package/dist/components/form/TagsInput/index.js

@@ -35,7 +35,8 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
     label = _ref.label,
     value = _ref.value,
     onChange = _ref.onChange,
-    palette = _ref.palette;
+    palette = _ref.palette,
+    saveLabel = _ref.saveLabel;
   var newValueAutofillIntervalRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -60,30 +61,26 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
     onChange(value !== null && value !== void 0 && value.includes(newValue) ? value : [].concat(_toConsumableArray(value ? value : []), [newValue]));
     setInputValue('');
   };
+  var acceptValueByTimeout = function acceptValueByTimeout(newValue) {
+    newValueAutofillIntervalRef.current = setTimeout(function () {
+      acceptNewValue(newValue);
+    }, 3000);
+  };
   var handleChange = function handleChange(event) {
     setInputValue(event.target.value);
     clearNewValueAutofillInterval();
     if (event.target.value) {
-      newValueAutofillIntervalRef.current = setTimeout(function () {
-        acceptNewValue(event.target.value);
-      }, 3000);
+      acceptValueByTimeout(event.target.value);
     }
   };
   var handleKeyDown = function handleKeyDown(event) {
-    var target = event.target;
-    if (event.key === 'Enter' && inputValue.length) {
-      clearNewValueAutofillInterval();
-      acceptNewValue(target.value);
-    }
     if (event.key === 'Backspace' && inputValue === '' && value !== null && value !== void 0 && value.length) {
       // нужно чтобы после выполнения кода ниже - в handleChange не передалось значение и автоматически ч-з backspace не стёрся крайний символ
       event.preventDefault();
       var lastTagValue = value[value.length - 1];
       setInputValue(lastTagValue);
       handleTagRemove(lastTagValue);
-      newValueAutofillIntervalRef.current = setTimeout(function () {
-        acceptNewValue(lastTagValue);
-      }, 3000);
+      acceptValueByTimeout(lastTagValue);
     }
   };
   var handleTagRemove = function handleTagRemove(tagRemoved) {
@@ -92,23 +89,32 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
     });
     onChange(valueWithoutRemovedTag !== null && valueWithoutRemovedTag !== void 0 && valueWithoutRemovedTag.length ? valueWithoutRemovedTag : undefined);
   };
-  var handlePureInputClick = function handlePureInputClick() {
+  var handlePureInputWrapperBlur = function handlePureInputWrapperBlur(event) {
+    var newFocusedElement = event.relatedTarget;
+    if (!event.currentTarget.contains(newFocusedElement)) {
+      handleBlur(event);
+      clearNewValueAutofillInterval();
+      if (event.target.value) {
+        acceptNewValue(event.target.value);
+      }
+    }
+  };
+  var handlePureInputWrapperFocus = function handlePureInputWrapperFocus(event) {
     var _inputRef$current;
+    handleFocus(event);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
   };
-  var handlePureInputBlur = function handlePureInputBlur(event) {
-    handleBlur(event);
-    clearNewValueAutofillInterval();
-    if (event.target.value) {
-      acceptNewValue(event.target.value);
-    }
-  };
   var handleChipClick = function handleChipClick(chipValue) {
+    clearNewValueAutofillInterval();
     setInputValue(chipValue);
     handleTagRemove(chipValue);
-    newValueAutofillIntervalRef.current = setTimeout(function () {
-      acceptNewValue(chipValue);
-    }, 3000);
+    acceptValueByTimeout(chipValue);
+  };
+  var handleSaveButtonClick = function handleSaveButtonClick() {
+    var _inputRef$current2;
+    clearNewValueAutofillInterval();
+    acceptNewValue(inputValue);
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
   };
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     label: label
@@ -122,7 +128,9 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
     $paddingBottom: paddingBottom,
     $hasError: hasError,
     $inFocus: inFocus,
-    onClick: handlePureInputClick
+    onBlur: handlePureInputWrapperBlur,
+    onFocus: handlePureInputWrapperFocus,
+    tabIndex: -1
   }, /*#__PURE__*/_react["default"].createElement(S.TagsWrapper, null, value === null || value === void 0 ? void 0 : value.map(function (tagItem, index) {
     return /*#__PURE__*/_react["default"].createElement(_Chip.Chip, {
       key: tagItem + index,
@@ -142,18 +150,21 @@ var TagsInput = exports.TagsInput = function TagsInput(_ref) {
       color: tagsInputPalette.chipColor,
       bgColor: tagsInputPalette.chipBg
     });
-  }), /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
+  }), /*#__PURE__*/_react["default"].createElement(S.InputWithSaveButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
     ref: inputRef,
-    hasBorder: false,
+    hasBorder: inFocus,
     paddingBottom: 0,
     paddingRight: 0,
     paddingTop: 0,
-    paddingLeft: 0,
-    borderRadius: 0,
+    paddingLeft: 4,
+    borderRadius: 6,
     value: inputValue,
     onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    onBlur: handlePureInputBlur,
-    onFocus: handleFocus
-  })))));
+    onKeyDown: handleKeyDown
+  }), !!inputValue.length && (value !== null && value !== void 0 && value.length ? !value.includes(inputValue) : true) && /*#__PURE__*/_react["default"].createElement(S.SaveButton, {
+    type: 'button',
+    onClick: handleSaveButtonClick
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: 'captionRegular'
+  }, saveLabel))))));
 };

package/dist/components/form/TagsInput/index.stories.js

@@ -36,7 +36,8 @@ var Default = exports.Default = {
   args: {
     size: 'M',
     label: 'Label',
-    hasError: false
+    hasError: false,
+    saveLabel: 'Сохранить'
   },
   render: Component
 };

package/dist/components/form/TagsInput/styles.d.ts

@@ -12,6 +12,7 @@ export declare const PureInputStyledWrapper: import("styled-components/dist/type
     $variant?: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints" | undefined;
 }>> & string & ({} | Omit<React.ComponentClass<any, any>, keyof React.Component<any, {}, any>> | Omit<React.FunctionComponent<any>, keyof React.Component<any, {}, any>>);
 export declare const TagsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InputWithSaveButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SaveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ChipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChipRemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/components/form/TagsInput/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TagsWrapper = exports.PureInputStyledWrapper = exports.InputWrapper = exports.ChipRemoveButton = exports.ChipLabel = void 0;
+exports.TagsWrapper = exports.SaveButton = exports.PureInputStyledWrapper = exports.InputWithSaveButtonWrapper = exports.ChipRemoveButton = exports.ChipLabel = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("../PureInput/styles");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -15,26 +15,30 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var Wrapper = function Wrapper(_ref) {
   var children = _ref.children,
     other = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({}, other, {
     style: {
       overflow: 'hidden'
     }
-  }, other), children);
+  }), children);
 };
 var PureInputStyledWrapper = exports.PureInputStyledWrapper = (0, _styles.getPureInputStyled)(Wrapper);
 var TagsWrapper = exports.TagsWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__TagsWrapper",
   componentId: "sc-1uwnjdr-0"
 })(["display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;"]);
-var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withConfig({
-  displayName: "styles__InputWrapper",
+var InputWithSaveButtonWrapper = exports.InputWithSaveButtonWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__InputWithSaveButtonWrapper",
   componentId: "sc-1uwnjdr-1"
-})(["width:auto;"]);
+})(["width:auto;display:flex;align-items:center;gap:12px;"]);
+var SaveButton = exports.SaveButton = _styledComponents["default"].button.withConfig({
+  displayName: "styles__SaveButton",
+  componentId: "sc-1uwnjdr-2"
+})(["background:transparent;border:none;cursor:pointer;"]);
 var ChipLabel = exports.ChipLabel = _styledComponents["default"].div.withConfig({
   displayName: "styles__ChipLabel",
-  componentId: "sc-1uwnjdr-2"
+  componentId: "sc-1uwnjdr-3"
 })(["display:flex;align-items:center;gap:6px;"]);
 var ChipRemoveButton = exports.ChipRemoveButton = _styledComponents["default"].button.withConfig({
   displayName: "styles__ChipRemoveButton",
-  componentId: "sc-1uwnjdr-3"
+  componentId: "sc-1uwnjdr-4"
 })(["display:flex;justify-content:center;align-items:center;background:transparent;border:none;cursor:pointer;outline:none;color:inherit;padding:0;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.239",
+    "version": "0.1.0-alpha.241",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {