@invoicebox/ui 0.1.0-alpha.220 → 0.1.0-alpha.222

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

@@ -4,7 +4,7 @@ type TOption = {
     value: string;
     entity?: any;
 };
-type TFieldProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onFocus' | 'autoFocus'> & {
+type TFieldProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onFocus' | 'autoFocus' | 'readOnly'> & {
     value: string;
     onChange: (value: string, option?: TOption) => void;
 };
@@ -26,7 +26,7 @@ type TControlProps = {
     required?: boolean;
 };
 export type TProps = TFieldProps & TControlProps;
-export declare const Autocomplete: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "name" | "autoFocus" | "onFocus" | "onBlur"> & {
+export declare const Autocomplete: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "autoFocus" | "onFocus" | "onBlur"> & {
     value: string;
     onChange: (value: string, option?: TOption) => void;
 } & TControlProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -56,7 +56,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     size = _ref$size === void 0 ? 'M' : _ref$size,
     autoFocus = _ref.autoFocus,
     _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+    required = _ref$required === void 0 ? false : _ref$required,
+    readOnly = _ref.readOnly;
   var isMobile = (0, _useMedia.useMobile)();
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -110,7 +111,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     paddingLeft: inputPaddingLeft,
     maxLength: inputMaxLength,
     isOnlyNumbers: isInputOnlyNumbers,
-    autoFocus: autoFocus
+    autoFocus: autoFocus,
+    readOnly: readOnly
   }, _constants.SIZE_PARAMS_MAP[size])))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen && (!!options.length || !!isLoading),
     isAutoPosition: true,

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

@@ -57,7 +57,8 @@ var Default = exports.Default = {
     disabled: false,
     isCustomOptionRender: false,
     children: 'children',
-    inputPaddingLeft: 60
+    inputPaddingLeft: 60,
+    readOnly: false
   },
   render: Component
 };

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

@@ -12,6 +12,7 @@ export type TProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onBlur'
     isOnlyNumbers?: boolean;
     className?: never;
     element?: 'input' | 'textarea';
+    renderedValue?: React.ReactNode;
 };
 export declare const PureInput: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & React.InputHTMLAttributes<HTMLInputElement> & Partial<Pick<TInputWithTypographyProps, "variant">> & {
     paddingLeft?: number | undefined;
@@ -25,4 +26,5 @@ export declare const PureInput: React.ForwardRefExoticComponent<Omit<React.Texta
     isOnlyNumbers?: boolean | undefined;
     className?: undefined;
     element?: "input" | "textarea" | undefined;
+    renderedValue?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -8,7 +8,7 @@ exports.PureInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _palette = require("../../../palette");
-var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant"];
+var _excluded = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderRadius", "hasError", "inFocus", "hasBorder", "isOnlyNumbers", "className", "onChange", "element", "variant", "renderedValue"];
 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; }
 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); }
@@ -39,6 +39,7 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     element = _ref$element === void 0 ? 'input' : _ref$element,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'bodyMRegular' : _ref$variant,
+    renderedValue = _ref.renderedValue,
     rest = _objectWithoutProperties(_ref, _excluded);
   var palette = (0, _palette.useComponentPalette)('pureInput');
   var handleChange = (0, _react.useCallback)(function (event) {
@@ -51,7 +52,7 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
     ref: ref,
     variant: variant,
-    element: element,
+    element: renderedValue ? 'div' : element,
     $paddingLeft: paddingLeft,
     $paddingRight: paddingRight,
     $paddingTop: paddingTop,
@@ -62,6 +63,6 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     $palette: palette,
     $borderRadius: borderRadius,
     onChange: handleChange
-  }, rest));
+  }, rest), renderedValue);
 });
 PureInput.displayName = 'PureInput';

package/dist/components/form/Select/components/Input/index.d.ts

@@ -6,8 +6,10 @@ import { TSizes } from '../../../constants';
 export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label' | 'required'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value' | 'onClick'> & Pick<TArrowProps, 'isOpen'> & {
     onReset?: () => void;
     size?: TSizes;
+    renderedValue?: React.ReactNode;
 };
 export declare const Input: React.ForwardRefExoticComponent<Pick<TInputLabelProps, "required" | "label" | "inFocus"> & Pick<TPureInputProps, "name" | "value" | "placeholder" | "onFocus" | "onBlur" | "onClick" | "hasError"> & Pick<TArrowProps, "isOpen"> & {
     onReset?: (() => void) | undefined;
     size?: TSizes | undefined;
+    renderedValue?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -22,6 +22,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     value = _ref.value,
+    renderedValue = _ref.renderedValue,
     name = _ref.name,
     label = _ref.label,
     isOpen = _ref.isOpen,
@@ -44,6 +45,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,
+    renderedValue: renderedValue,
     readOnly: true,
     paddingRight: 52,
     onClick: onClick

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

@@ -19,6 +19,7 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
     isResetButtonEnabled?: boolean;
     renderOption?: (entity?: any) => ReactNode;
     renderGroup?: (entity?: any) => ReactNode;
+    renderValue?: (entity?: any) => ReactNode;
     dropdownHeader?: ReactNode;
     scrollbarHeader?: ReactNode;
     isDrawerOptions?: boolean;
@@ -27,4 +28,4 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
     isLoading?: boolean;
     required?: boolean;
 };
-export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, emptyOptionsLabel, isLoading, onBlur, required, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, renderValue, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, emptyOptionsLabel, isLoading, onBlur, required, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

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

@@ -33,6 +33,7 @@ var Select = exports.Select = function Select(_ref) {
     placeholder = _ref.placeholder,
     name = _ref.name,
     value = _ref.value,
+    renderValue = _ref.renderValue,
     onChange = _ref.onChange,
     options = _ref.options,
     _ref$groups = _ref.groups,
@@ -193,6 +194,10 @@ var Select = exports.Select = function Select(_ref) {
     }
     return emptyLabel;
   };
+  var renderedValue = (0, _react.useMemo)(function () {
+    if (!renderValue || !(selectedOption !== null && selectedOption !== void 0 && selectedOption.entity)) return;
+    return renderValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity);
+  }, [renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: isDrawerOptions ? undefined : wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
@@ -204,11 +209,12 @@ var Select = exports.Select = function Select(_ref) {
     onFocus: isDrawerOptions ? undefined : handleFocus,
     onBlur: isDrawerOptions ? undefined : handleBlur,
     value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '',
+    renderedValue: renderedValue,
     name: name,
     isOpen: isOpen,
     onReset: isResetButtonEnabled ? handleReset : undefined,
     size: size,
-    onClick: isDrawerOptions ? handleInputClick : undefined,
+    onClick: isDrawerOptions || !!renderedValue ? handleInputClick : undefined,
     required: required
   })), isDrawerOptions ? /*#__PURE__*/_react["default"].createElement(_Drawer.Drawer, {
     onClose: handleHide,

package/dist/components/form/Select/index.stories.d.ts

@@ -9,3 +9,4 @@ export declare const RenderOption: StoryObj<TProps<string>>;
 export declare const WithGroups: StoryObj<TProps<string>>;
 export declare const RenderOptionWithGroups: StoryObj<TProps<string>>;
 export declare const WithCustomGroups: StoryObj<TProps<string>>;
+export declare const WithRenderedValue: StoryObj<TProps<string>>;

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithGroups = exports.WithDropdownHeader = exports.WithCustomGroups = exports.RenderOptionWithGroups = exports.RenderOption = exports.EmptyOptions = exports.Default = void 0;
+exports["default"] = exports.WithRenderedValue = exports.WithGroups = exports.WithDropdownHeader = exports.WithCustomGroups = exports.RenderOptionWithGroups = exports.RenderOption = exports.EmptyOptions = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _ = require(".");
@@ -55,6 +55,7 @@ var COMMON_ARGS = {
     value: 'option-1',
     groupId: '1',
     entity: {
+      id: 1,
       name: 'name option 1'
     }
   }, {
@@ -62,6 +63,7 @@ var COMMON_ARGS = {
     value: 'option-2',
     groupId: '1',
     entity: {
+      id: 2,
       name: 'name option 2'
     }
   }, {
@@ -69,6 +71,7 @@ var COMMON_ARGS = {
     value: 'option-3',
     groupId: '2',
     entity: {
+      id: 3,
       name: 'name option 3'
     }
   }, {
@@ -76,61 +79,98 @@ var COMMON_ARGS = {
     value: 'option-4',
     groupId: '2',
     entity: {
+      id: 4,
       name: 'name option 4'
     }
   }, {
     label: 'Option 5',
     value: 'option-5',
     entity: {
+      id: 5,
       name: 'name option 5'
     }
   }, {
     label: 'Option 6',
     value: 'option-6',
     entity: {
+      id: 6,
       name: 'name option 6'
     }
   }, {
     label: 'Option 7',
     value: 'option-7',
     entity: {
+      id: 7,
       name: 'name option 7'
     }
   }, {
     label: 'Option 8',
     value: 'option-8',
     entity: {
+      id: 8,
       name: 'name option 8'
     }
   }, {
     label: 'Option 9',
     value: 'option-9',
     entity: {
+      id: 9,
       name: 'name option 9'
     }
   }, {
     label: 'Option 10',
     value: 'option-10',
     entity: {
+      id: 10,
       name: 'name option 10'
     }
   }, {
     label: 'Option 11',
     value: 'option-11',
     entity: {
+      id: 11,
       name: 'name option 11'
     }
   }, {
     label: 'Option 12',
     value: 'option-12',
     entity: {
+      id: 12,
       name: 'name option 12'
     }
   }]
 };
+var COLORS_BY_ID_MAP = {
+  1: 'red',
+  2: 'blue',
+  3: 'green',
+  4: 'red',
+  5: 'blue',
+  6: 'green',
+  7: 'red',
+  8: 'blue',
+  9: 'green'
+};
 var renderOption = function renderOption(entity) {
   return /*#__PURE__*/_react["default"].createElement("div", null, "Hello ", entity.name, " ");
 };
+var renderValue = function renderValue(entity) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '10px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: 40,
+      height: 40,
+      backgroundColor: COLORS_BY_ID_MAP[entity.id],
+      borderRadius: 10,
+      border: '1px solid lightgrey'
+    }
+  }), "Selected color: ", entity.name, ' ');
+};
 var renderGroup = function renderGroup(group) {
   return /*#__PURE__*/_react["default"].createElement("div", null, "Group name is: ", group.name, " ");
 };
@@ -200,4 +240,10 @@ var WithCustomGroups = exports.WithCustomGroups = {
     renderGroup: renderGroup
   }),
   render: Component
+};
+var WithRenderedValue = exports.WithRenderedValue = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    renderValue: renderValue
+  }),
+  render: Component
 };

package/package.json

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