@invoicebox/ui 0.1.0-alpha.255 → 0.1.0-alpha.257

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

@@ -9,6 +9,8 @@ export type TProps = {
     onChange: (value: Date) => void;
     placeholder?: string;
     dropdownProps?: Pick<TDropdownProps, 'isAutoPosition' | 'positionLeft' | 'positionRight' | 'positionVertical'>;
+    saveLabel?: string;
+    cancelLabel?: string;
     required?: boolean;
 } & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
     size?: TSizes;

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

@@ -18,8 +18,6 @@ var _CalendarIcon = require("../DateInput/components/CalendarIcon");
 var _Dropdown = require("../../common/Dropdown");
 var _Calendar = require("../../common/Calendar");
 var _TimePicker = require("./components/TimePicker");
-var _CrossIcon = require("./components/CrossIcon");
-var _CheckIcon = require("./components/CheckIcon");
 var _index = require("../../../index");
 var _useTimePickerHeight2 = require("./hooks/useTimePickerHeight");
 var _useStringValue3 = require("./hooks/useStringValue");
@@ -47,6 +45,8 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     size = _ref$size === void 0 ? 'M' : _ref$size,
     dropdownProps = _ref.dropdownProps,
     placeholder = _ref.placeholder,
+    saveLabel = _ref.saveLabel,
+    cancelLabel = _ref.cancelLabel,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required;
   var palette = (0, _palette.useComponentPalette)('dateTimeInput');
@@ -145,7 +145,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     paddingRight: 44
   }, _constants.SIZE_PARAMS_MAP[size])), /*#__PURE__*/_react["default"].createElement(S.Icon, {
     onClick: handleTrigger,
-    $palette: palette
+    $color: palette.icon
   }, /*#__PURE__*/_react["default"].createElement(_CalendarIcon.CalendarIcon, null)))), !isMobile ? /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, _extends({
     isOpen: isOpen,
     isAutoPosition: true
@@ -170,14 +170,20 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     type: 'button',
     $bgColor: palette.cancelButton,
     $disabledBgColor: palette.disabledButton,
+    $color: palette.buttonLabel,
     onClick: handleCloseAndSkipDropdownValue
-  }, /*#__PURE__*/_react["default"].createElement(_CrossIcon.CrossIcon, null)), /*#__PURE__*/_react["default"].createElement(S.ActionButton, {
+  }, /*#__PURE__*/_react["default"].createElement(_index.Typography, {
+    variant: 'buttonM'
+  }, cancelLabel || 'Закрыть')), /*#__PURE__*/_react["default"].createElement(S.ActionButton, {
     type: 'button',
     $bgColor: palette.applyButton,
     $disabledBgColor: palette.disabledButton,
+    $color: palette.buttonLabel,
     onClick: handleApply,
     disabled: !calendarDropdownValue || !_logic.logic.isBetweenMinAndMax(calendarDropdownValue, minDate, maxDate)
-  }, /*#__PURE__*/_react["default"].createElement(_CheckIcon.CheckIcon, null)))) : /*#__PURE__*/_react["default"].createElement(_MobileDrawerDateTimeCalendar.MobileDrawerDateTimeCalendar, {
+  }, /*#__PURE__*/_react["default"].createElement(_index.Typography, {
+    variant: 'buttonM'
+  }, saveLabel || 'Сохранить')))) : /*#__PURE__*/_react["default"].createElement(_MobileDrawerDateTimeCalendar.MobileDrawerDateTimeCalendar, {
     isOpen: isOpen,
     onClose: handleCloseAndSkipDropdownValue,
     calendarDropdownValue: calendarDropdownValue,

package/dist/components/form/DateTimeInput/palette.d.ts

@@ -1,6 +1,7 @@
 import { TAbstractPalette } from '../../../palette';
 export type TDateTimeInputPalette = {
     icon: string;
+    buttonLabel: string;
     divider: string;
     cancelButton: string;
     applyButton: string;

package/dist/components/form/DateTimeInput/palette.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 var generateDateTimeInputPalette = exports.generateDateTimeInputPalette = function generateDateTimeInputPalette(abstractPalette) {
   return {
     icon: abstractPalette.primary,
+    buttonLabel: abstractPalette.primary,
     divider: (0, _hexToRgba["default"])(abstractPalette.primary, 0.1),
     cancelButton: abstractPalette.neutralUsual,
     applyButton: abstractPalette.secondary,

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { TDateInputPalette } from '../DateInput/palette';
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $palette: TDateInputPalette;
+    $color: string;
 }>> & string;
 export declare const CalendarWithTimePicker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $dividerColor: string;
@@ -13,6 +12,7 @@ export declare const CalendarWrapper: import("styled-components/dist/types").ISt
 }>> & string;
 export declare const DropdownActionButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $color: string;
     $bgColor: string;
     $disabledBgColor: string;
     disabled?: boolean | undefined;

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

@@ -19,8 +19,8 @@ var Icon = exports.Icon = _styledComponents["default"].div.withConfig({
   displayName: "styles__Icon",
   componentId: "sc-jdd8eb-2"
 })(["position:absolute;right:12px;top:0;height:100%;display:flex;justify-content:center;flex-direction:column;cursor:pointer;color:", ";"], function (_ref) {
-  var $palette = _ref.$palette;
-  return $palette.icon;
+  var $color = _ref.$color;
+  return $color;
 });
 var CalendarWithTimePicker = exports.CalendarWithTimePicker = _styledComponents["default"].div.withConfig({
   displayName: "styles__CalendarWithTimePicker",
@@ -43,13 +43,16 @@ var DropdownActionButtons = exports.DropdownActionButtons = _styledComponents["d
 var ActionButton = exports.ActionButton = _styledComponents["default"].button.withConfig({
   displayName: "styles__ActionButton",
   componentId: "sc-jdd8eb-6"
-})(["width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:none;cursor:pointer;outline:none;background-color:", ";&:hover{opacity:", ";}&:disabled{background-color:", ";cursor:not-allowed;}"], function (_ref4) {
-  var $bgColor = _ref4.$bgColor;
-  return $bgColor;
+})(["height:36px;padding:8px 16px;border-radius:50px;display:flex;justify-content:center;align-items:center;border:none;cursor:pointer;outline:none;color:", ";background-color:", ";&:hover{opacity:", ";}&:disabled{background-color:", ";cursor:not-allowed;}"], function (_ref4) {
+  var $color = _ref4.$color;
+  return $color;
 }, function (_ref5) {
-  var disabled = _ref5.disabled;
-  return disabled ? 1 : 0.8;
+  var $bgColor = _ref5.$bgColor;
+  return $bgColor;
 }, function (_ref6) {
-  var $disabledBgColor = _ref6.$disabledBgColor;
+  var disabled = _ref6.disabled;
+  return disabled ? 1 : 0.8;
+}, function (_ref7) {
+  var $disabledBgColor = _ref7.$disabledBgColor;
   return $disabledBgColor;
 });

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

@@ -201,7 +201,7 @@ var Select = exports.Select = function Select(_ref) {
         maxHeight: scrollbarMaxHeight
       }, scrollbarContent, /*#__PURE__*/_react["default"].createElement(S.DrawerBottom, null)));
     }
-    return emptyLabel;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dropdownHeader, " ", emptyLabel);
   };
   var renderedValue = (0, _react.useMemo)(function () {
     if (!renderValue || !(selectedOption !== null && selectedOption !== void 0 && selectedOption.entity)) return;

package/package.json

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

package/dist/components/form/DateTimeInput/components/CheckIcon/index.d.ts

@@ -1 +0,0 @@
-export declare const CheckIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateTimeInput/components/CheckIcon/index.js

@@ -1,25 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CheckIcon = void 0;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-var CheckIcon = exports.CheckIcon = function CheckIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M15 6.66699L8.8037 13.3337L5 9.28353",
-    stroke: "#353F47",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};

package/dist/components/form/DateTimeInput/components/CheckIcon/index.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CheckIcon } from './index';
-declare const meta: Meta<typeof CheckIcon>;
-export default meta;
-export declare const Default: StoryObj<typeof CheckIcon>;

package/dist/components/form/DateTimeInput/components/CheckIcon/index.stories.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _index = require("./index");
-var meta = {
-  title: 'form/DateTimeInput/_components/CheckIcon',
-  component: _index.CheckIcon,
-  tags: ['autodocs']
-};
-var _default = exports["default"] = meta;
-var Default = exports.Default = {};

package/dist/components/form/DateTimeInput/components/CrossIcon/index.d.ts

@@ -1 +0,0 @@
-export declare const CrossIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateTimeInput/components/CrossIcon/index.js

@@ -1,25 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CrossIcon = void 0;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-var CrossIcon = exports.CrossIcon = function CrossIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14.1673 5.83301L5.83398 14.1663M14.1673 14.1663L5.83398 5.83301",
-    stroke: "#353F47",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};

package/dist/components/form/DateTimeInput/components/CrossIcon/index.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CrossIcon } from './index';
-declare const meta: Meta<typeof CrossIcon>;
-export default meta;
-export declare const Default: StoryObj<typeof CrossIcon>;

package/dist/components/form/DateTimeInput/components/CrossIcon/index.stories.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _index = require("./index");
-var meta = {
-  title: 'form/DateTimeInput/_components/CrossIcon',
-  component: _index.CrossIcon,
-  tags: ['autodocs']
-};
-var _default = exports["default"] = meta;
-var Default = exports.Default = {};