@astral/ui 0.42.1 → 0.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/Autocomplete/Autocomplete.d.ts +9 -1
  2. package/Autocomplete/Autocomplete.js +4 -2
  3. package/Autocomplete/constants.d.ts +1 -0
  4. package/Autocomplete/constants.js +2 -1
  5. package/Autocomplete/index.d.ts +0 -1
  6. package/Autocomplete/index.js +0 -1
  7. package/DialogTitle/DialogTitle.d.ts +4 -1
  8. package/DialogTitle/DialogTitle.js +2 -2
  9. package/DialogTitle/index.d.ts +0 -1
  10. package/DialogTitle/index.js +0 -1
  11. package/OverflowTypography/OverflowTypography.d.ts +24 -0
  12. package/OverflowTypography/OverflowTypography.js +40 -0
  13. package/OverflowTypography/hooks/useOverflowed/index.d.ts +1 -0
  14. package/OverflowTypography/hooks/useOverflowed/index.js +17 -0
  15. package/OverflowTypography/hooks/useOverflowed/useOverflowed.d.ts +5 -0
  16. package/OverflowTypography/hooks/useOverflowed/useOverflowed.js +30 -0
  17. package/OverflowTypography/index.d.ts +1 -0
  18. package/OverflowTypography/index.js +17 -0
  19. package/OverflowTypography/styles.d.ts +17 -0
  20. package/OverflowTypography/styles.js +16 -0
  21. package/esm/Autocomplete/Autocomplete.d.ts +9 -1
  22. package/esm/Autocomplete/Autocomplete.js +4 -2
  23. package/esm/Autocomplete/constants.d.ts +1 -0
  24. package/esm/Autocomplete/constants.js +1 -0
  25. package/esm/Autocomplete/index.d.ts +0 -1
  26. package/esm/Autocomplete/index.js +0 -1
  27. package/esm/DialogTitle/DialogTitle.d.ts +4 -1
  28. package/esm/DialogTitle/DialogTitle.js +3 -3
  29. package/esm/DialogTitle/index.d.ts +0 -1
  30. package/esm/DialogTitle/index.js +0 -1
  31. package/esm/OverflowTypography/OverflowTypography.d.ts +24 -0
  32. package/esm/OverflowTypography/OverflowTypography.js +37 -0
  33. package/esm/OverflowTypography/hooks/useOverflowed/index.d.ts +1 -0
  34. package/esm/OverflowTypography/hooks/useOverflowed/index.js +1 -0
  35. package/esm/OverflowTypography/hooks/useOverflowed/useOverflowed.d.ts +5 -0
  36. package/esm/OverflowTypography/hooks/useOverflowed/useOverflowed.js +23 -0
  37. package/esm/OverflowTypography/index.d.ts +1 -0
  38. package/esm/OverflowTypography/index.js +1 -0
  39. package/esm/OverflowTypography/styles.d.ts +17 -0
  40. package/esm/OverflowTypography/styles.js +13 -0
  41. package/esm/index.d.ts +1 -0
  42. package/esm/index.js +1 -0
  43. package/index.d.ts +1 -0
  44. package/index.js +1 -0
  45. package/package.json +2 -2
  46. package/Autocomplete/types.d.ts +0 -7
  47. package/Autocomplete/types.js +0 -2
  48. package/DialogTitle/types.d.ts +0 -4
  49. package/DialogTitle/types.js +0 -2
  50. package/esm/Autocomplete/types.d.ts +0 -7
  51. package/esm/Autocomplete/types.js +0 -1
  52. package/esm/DialogTitle/types.d.ts +0 -4
  53. package/esm/DialogTitle/types.js +0 -1
@@ -1,3 +1,11 @@
1
1
  /// <reference types="react" />
2
- import { AutocompleteProps } from './types';
2
+ import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
3
+ import { TextFieldProps } from '../TextField';
4
+ import { OverflowedElementProps } from '../OverflowTypography';
5
+ import { AutocompleteSizes } from './constants';
6
+ export declare type AutocompleteSize = `${AutocompleteSizes}`;
7
+ export declare type AutocompleteProps<AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = Omit<MuiAutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>, 'size' | 'renderInput'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label'> & {
8
+ size?: AutocompleteSize;
9
+ overflowOption?: OverflowedElementProps;
10
+ };
3
11
  export declare const Autocomplete: <AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean>(props: AutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
@@ -32,8 +32,10 @@ var TextField_1 = require("../TextField");
32
32
  var Tag_1 = require("../Tag");
33
33
  var MenuItem_1 = require("../MenuItem");
34
34
  var Checkbox_1 = require("../Checkbox");
35
+ var OverflowTypography_1 = require("../OverflowTypography");
36
+ var constants_1 = require("./constants");
35
37
  var Autocomplete = function (props) {
36
- var multiple = props.multiple, placeholder = props.placeholder, error = props.error, success = props.success, helperText = props.helperText, label = props.label, _a = props.size, size = _a === void 0 ? 'medium' : _a, getOptionLabel = props.getOptionLabel, externalRenderOption = props.renderOption, restProps = __rest(props, ["multiple", "placeholder", "error", "success", "helperText", "label", "size", "getOptionLabel", "renderOption"]);
38
+ var multiple = props.multiple, placeholder = props.placeholder, error = props.error, success = props.success, helperText = props.helperText, label = props.label, _a = props.size, size = _a === void 0 ? 'medium' : _a, getOptionLabel = props.getOptionLabel, externalRenderOption = props.renderOption, overflowOption = props.overflowOption, restProps = __rest(props, ["multiple", "placeholder", "error", "success", "helperText", "label", "size", "getOptionLabel", "renderOption", "overflowOption"]);
37
39
  var renderTags = (0, react_2.useCallback)(function (tags, getTagProps) {
38
40
  return tags.map(function (tag, index) {
39
41
  var title = (getOptionLabel && getOptionLabel(tag)) || '';
@@ -48,7 +50,7 @@ var Autocomplete = function (props) {
48
50
  var selected = Boolean(optionProps['aria-selected']);
49
51
  return ((0, react_1.createElement)(MenuItem_1.MenuItem, __assign({}, optionProps, { key: optionProps.id }),
50
52
  multiple && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: selected }) })),
51
- optionProps.key));
53
+ (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, __assign({ rowsCount: constants_1.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))));
52
54
  }, [multiple, externalRenderOption]);
53
55
  return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, __assign({}, restProps, { size: size, multiple: multiple, getOptionLabel: getOptionLabel, disableCloseOnSelect: multiple, renderTags: renderTags, renderInput: renderInput, renderOption: renderOption, popupIcon: (0, jsx_runtime_1.jsx)(icons_1.ChevronDOutlineMd, {}), clearIcon: (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}), componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })));
54
56
  };
@@ -2,3 +2,4 @@ export declare enum AutocompleteSizes {
2
2
  medium = "medium",
3
3
  small = "small"
4
4
  }
5
+ export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
@@ -1,8 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.AutocompleteSizes = void 0;
3
+ exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = exports.AutocompleteSizes = void 0;
4
4
  var AutocompleteSizes;
5
5
  (function (AutocompleteSizes) {
6
6
  AutocompleteSizes["medium"] = "medium";
7
7
  AutocompleteSizes["small"] = "small";
8
8
  })(AutocompleteSizes = exports.AutocompleteSizes || (exports.AutocompleteSizes = {}));
9
+ exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
@@ -1,2 +1 @@
1
- export * from './types';
2
1
  export * from './Autocomplete';
@@ -14,5 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./types"), exports);
18
17
  __exportStar(require("./Autocomplete"), exports);
@@ -1,3 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { DialogTitleProps } from './types';
2
+ import { ModalProps, DialogTitleProps as MuiDialogTitleProps } from '@mui/material';
3
+ export declare type DialogTitleProps = MuiDialogTitleProps & {
4
+ onClose?: ModalProps['onClose'];
5
+ };
3
6
  export declare const DialogTitle: ({ children, onClose, ...props }: DialogTitleProps) => JSX.Element;
@@ -30,11 +30,11 @@ var IconButton_1 = require("../IconButton");
30
30
  var DialogTitle = function (_a) {
31
31
  // 'escapeKeyDown' в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick
32
32
  var children = _a.children, onClose = _a.onClose, props = __rest(_a, ["children", "onClose"]);
33
- var onClickTitle = function (e) {
33
+ var handleTitleClick = function (e) {
34
34
  if (onClose) {
35
35
  onClose(e, 'escapeKeyDown');
36
36
  }
37
37
  };
38
- return ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, __assign({}, props, { children: [children, onClose && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({ variant: "text", onClick: onClickTitle }, { children: (0, jsx_runtime_1.jsx)(icons_1.CrossOutlineMd, {}) })))] })));
38
+ return ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, __assign({}, props, { children: [children, onClose && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({ variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E" }, { children: (0, jsx_runtime_1.jsx)(icons_1.CrossOutlineMd, {}) })))] })));
39
39
  };
40
40
  exports.DialogTitle = DialogTitle;
@@ -1,2 +1 @@
1
1
  export * from './DialogTitle';
2
- export * from './types';
@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./DialogTitle"), exports);
18
- __exportStar(require("./types"), exports);
@@ -0,0 +1,24 @@
1
+ import { PropsWithChildren } from 'react';
2
+ import { TypographyProps } from '../Typography';
3
+ import { TooltipProps as BasicTooltipProps } from '../Tooltip';
4
+ declare type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
5
+ export declare type OverflowedProps = {
6
+ /**
7
+ * @example <OverflowTypography rowsCount={2} />
8
+ * @default 1
9
+ * @description опорная единица по которой определяется максимиально отображаемое колличество строк
10
+ */
11
+ rowsCount?: number;
12
+ };
13
+ declare type TooltipCustomizable = {
14
+ /**
15
+ * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
16
+ * @description способ кастомизировать тултип при необходимости
17
+ */
18
+ tooltipProps?: Omit<TooltipProps, 'children'>;
19
+ };
20
+ export declare type OverflowedElementProps = OverflowedProps & TooltipCustomizable & TypographyProps;
21
+ export declare type OverflowedTypographyProps = PropsWithChildren<OverflowedElementProps>;
22
+ export declare const DEFAULT_ROWS_COUNT = 1;
23
+ export declare const OverflowTypography: import("react").ForwardRefExoticComponent<Pick<OverflowedTypographyProps, "tabIndex" | "children" | "slot" | "title" | "key" | "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | ("fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "typography" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "rowsCount" | "tooltipProps"> & import("react").RefAttributes<HTMLElement>>;
24
+ export {};
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ exports.OverflowTypography = exports.DEFAULT_ROWS_COUNT = void 0;
26
+ var jsx_runtime_1 = require("react/jsx-runtime");
27
+ var react_1 = require("react");
28
+ var Tooltip_1 = require("../Tooltip");
29
+ var styles_1 = require("./styles");
30
+ var useOverflowed_1 = require("./hooks/useOverflowed");
31
+ exports.DEFAULT_ROWS_COUNT = 1;
32
+ exports.OverflowTypography = (0, react_1.forwardRef)(function (_a, forwardedRef) {
33
+ var tooltipProps = _a.tooltipProps, children = _a.children, _b = _a.rowsCount, rowsCount = _b === void 0 ? exports.DEFAULT_ROWS_COUNT : _b, props = __rest(_a, ["tooltipProps", "children", "rowsCount"]);
34
+ var _c = (0, useOverflowed_1.useOverflowed)(forwardedRef), ref = _c.ref, isOverflowed = _c.isOverflowed;
35
+ var typographyProps = __assign(__assign({}, props), { ref: ref, children: children, rowsCount: rowsCount });
36
+ if (children && isOverflowed) {
37
+ return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ title: children, disableInteractive: true }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(styles_1.OverflowTypographyWrapper, __assign({}, typographyProps)) })));
38
+ }
39
+ return (0, jsx_runtime_1.jsx)(styles_1.OverflowTypographyWrapper, __assign({}, typographyProps));
40
+ });
@@ -0,0 +1 @@
1
+ export * from './useOverflowed';
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./useOverflowed"), exports);
@@ -0,0 +1,5 @@
1
+ import { Ref } from 'react';
2
+ export declare const useOverflowed: (forwardedRef?: Ref<HTMLElement>) => {
3
+ isOverflowed: boolean;
4
+ ref: import("react").RefObject<HTMLElement>;
5
+ };
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.useOverflowed = void 0;
7
+ var react_1 = require("react");
8
+ var debounce_1 = __importDefault(require("lodash-es/debounce"));
9
+ var useOverflowed = function (forwardedRef) {
10
+ var localRef = (0, react_1.useRef)(null);
11
+ var ref = forwardedRef && typeof forwardedRef !== 'function'
12
+ ? forwardedRef
13
+ : localRef;
14
+ var _a = (0, react_1.useState)(false), isOverflowed = _a[0], setOverflow = _a[1];
15
+ var handleResize = (0, react_1.useCallback)((0, debounce_1.default)(function (_a) {
16
+ var _b = _a[0], target = _b.target, contentRect = _b.contentRect;
17
+ return setOverflow(contentRect.height < target.scrollHeight);
18
+ }, 500), []);
19
+ var resizeObserver = (0, react_1.useMemo)(function () { return new ResizeObserver(handleResize); }, []);
20
+ (0, react_1.useLayoutEffect)(function () {
21
+ if (ref === null || ref === void 0 ? void 0 : ref.current) {
22
+ var node_1 = ref.current;
23
+ resizeObserver.observe(node_1);
24
+ return function () { return resizeObserver.unobserve(node_1); };
25
+ }
26
+ return;
27
+ }, [ref.current]);
28
+ return { isOverflowed: isOverflowed, ref: ref };
29
+ };
30
+ exports.useOverflowed = useOverflowed;
@@ -0,0 +1 @@
1
+ export * from './OverflowTypography';
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./OverflowTypography"), exports);
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { OverflowedProps } from './OverflowTypography';
3
+ export declare const OverflowTypographyWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
4
+ align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
5
+ children?: import("react").ReactNode;
6
+ classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
7
+ gutterBottom?: boolean | undefined;
8
+ noWrap?: boolean | undefined;
9
+ paragraph?: boolean | undefined;
10
+ sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
11
+ variant?: "inherit" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | "div" | undefined;
12
+ variantMapping?: Partial<Record<"inherit" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | "div", string>> | undefined;
13
+ } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
14
+ ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
15
+ }, "children" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | ("fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "typography" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
16
+ theme?: import("@emotion/react").Theme | undefined;
17
+ } & Required<OverflowedProps>, {}, {}>;
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.OverflowTypographyWrapper = void 0;
8
+ var styles_1 = require("../styles");
9
+ var Typography_1 = require("../Typography");
10
+ exports.OverflowTypographyWrapper = (0, styles_1.styled)(Typography_1.Typography, {
11
+ shouldForwardProp: function (name) { return name !== 'rowsCount'; },
12
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: initial;\n"], ["\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: initial;\n"])), function (_a) {
13
+ var rowsCount = _a.rowsCount;
14
+ return rowsCount;
15
+ });
16
+ var templateObject_1;
@@ -1,3 +1,11 @@
1
1
  /// <reference types="react" />
2
- import { AutocompleteProps } from './types';
2
+ import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
3
+ import { TextFieldProps } from '../TextField';
4
+ import { OverflowedElementProps } from '../OverflowTypography';
5
+ import { AutocompleteSizes } from './constants';
6
+ export declare type AutocompleteSize = `${AutocompleteSizes}`;
7
+ export declare type AutocompleteProps<AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = Omit<MuiAutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>, 'size' | 'renderInput'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label'> & {
8
+ size?: AutocompleteSize;
9
+ overflowOption?: OverflowedElementProps;
10
+ };
3
11
  export declare const Autocomplete: <AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean>(props: AutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
@@ -29,8 +29,10 @@ import { TextField } from '../TextField';
29
29
  import { Tag } from '../Tag';
30
30
  import { MenuItem } from '../MenuItem';
31
31
  import { Checkbox } from '../Checkbox';
32
+ import { OverflowTypography, } from '../OverflowTypography';
33
+ import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, } from './constants';
32
34
  export var Autocomplete = function (props) {
33
- var multiple = props.multiple, placeholder = props.placeholder, error = props.error, success = props.success, helperText = props.helperText, label = props.label, _a = props.size, size = _a === void 0 ? 'medium' : _a, getOptionLabel = props.getOptionLabel, externalRenderOption = props.renderOption, restProps = __rest(props, ["multiple", "placeholder", "error", "success", "helperText", "label", "size", "getOptionLabel", "renderOption"]);
35
+ var multiple = props.multiple, placeholder = props.placeholder, error = props.error, success = props.success, helperText = props.helperText, label = props.label, _a = props.size, size = _a === void 0 ? 'medium' : _a, getOptionLabel = props.getOptionLabel, externalRenderOption = props.renderOption, overflowOption = props.overflowOption, restProps = __rest(props, ["multiple", "placeholder", "error", "success", "helperText", "label", "size", "getOptionLabel", "renderOption", "overflowOption"]);
34
36
  var renderTags = useCallback(function (tags, getTagProps) {
35
37
  return tags.map(function (tag, index) {
36
38
  var title = (getOptionLabel && getOptionLabel(tag)) || '';
@@ -45,7 +47,7 @@ export var Autocomplete = function (props) {
45
47
  var selected = Boolean(optionProps['aria-selected']);
46
48
  return (_createElement(MenuItem, __assign({}, optionProps, { key: optionProps.id }),
47
49
  multiple && (_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: selected }) })),
48
- optionProps.key));
50
+ _jsx(OverflowTypography, __assign({ rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))));
49
51
  }, [multiple, externalRenderOption]);
50
52
  return (_jsx(MuiAutocomplete, __assign({}, restProps, { size: size, multiple: multiple, getOptionLabel: getOptionLabel, disableCloseOnSelect: multiple, renderTags: renderTags, renderInput: renderInput, renderOption: renderOption, popupIcon: _jsx(ChevronDOutlineMd, {}), clearIcon: _jsx(CrossSmOutlineSm, {}), componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })));
51
53
  };
@@ -2,3 +2,4 @@ export declare enum AutocompleteSizes {
2
2
  medium = "medium",
3
3
  small = "small"
4
4
  }
5
+ export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
@@ -3,3 +3,4 @@ export var AutocompleteSizes;
3
3
  AutocompleteSizes["medium"] = "medium";
4
4
  AutocompleteSizes["small"] = "small";
5
5
  })(AutocompleteSizes || (AutocompleteSizes = {}));
6
+ export var DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
@@ -1,2 +1 @@
1
- export * from './types';
2
1
  export * from './Autocomplete';
@@ -1,2 +1 @@
1
- export * from './types';
2
1
  export * from './Autocomplete';
@@ -1,3 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { DialogTitleProps } from './types';
2
+ import { ModalProps, DialogTitleProps as MuiDialogTitleProps } from '@mui/material';
3
+ export declare type DialogTitleProps = MuiDialogTitleProps & {
4
+ onClose?: ModalProps['onClose'];
5
+ };
3
6
  export declare const DialogTitle: ({ children, onClose, ...props }: DialogTitleProps) => JSX.Element;
@@ -21,16 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
- import { DialogTitle as MuiDialogTitle } from '@mui/material';
24
+ import { DialogTitle as MuiDialogTitle, } from '@mui/material';
25
25
  import { CrossOutlineMd } from '@astral/icons';
26
26
  import { IconButton } from '../IconButton';
27
27
  export var DialogTitle = function (_a) {
28
28
  // 'escapeKeyDown' в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick
29
29
  var children = _a.children, onClose = _a.onClose, props = __rest(_a, ["children", "onClose"]);
30
- var onClickTitle = function (e) {
30
+ var handleTitleClick = function (e) {
31
31
  if (onClose) {
32
32
  onClose(e, 'escapeKeyDown');
33
33
  }
34
34
  };
35
- return (_jsxs(MuiDialogTitle, __assign({}, props, { children: [children, onClose && (_jsx(IconButton, __assign({ variant: "text", onClick: onClickTitle }, { children: _jsx(CrossOutlineMd, {}) })))] })));
35
+ return (_jsxs(MuiDialogTitle, __assign({}, props, { children: [children, onClose && (_jsx(IconButton, __assign({ variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E" }, { children: _jsx(CrossOutlineMd, {}) })))] })));
36
36
  };
@@ -1,2 +1 @@
1
1
  export * from './DialogTitle';
2
- export * from './types';
@@ -1,2 +1 @@
1
1
  export * from './DialogTitle';
2
- export * from './types';
@@ -0,0 +1,24 @@
1
+ import { PropsWithChildren } from 'react';
2
+ import { TypographyProps } from '../Typography';
3
+ import { TooltipProps as BasicTooltipProps } from '../Tooltip';
4
+ declare type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
5
+ export declare type OverflowedProps = {
6
+ /**
7
+ * @example <OverflowTypography rowsCount={2} />
8
+ * @default 1
9
+ * @description опорная единица по которой определяется максимиально отображаемое колличество строк
10
+ */
11
+ rowsCount?: number;
12
+ };
13
+ declare type TooltipCustomizable = {
14
+ /**
15
+ * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
16
+ * @description способ кастомизировать тултип при необходимости
17
+ */
18
+ tooltipProps?: Omit<TooltipProps, 'children'>;
19
+ };
20
+ export declare type OverflowedElementProps = OverflowedProps & TooltipCustomizable & TypographyProps;
21
+ export declare type OverflowedTypographyProps = PropsWithChildren<OverflowedElementProps>;
22
+ export declare const DEFAULT_ROWS_COUNT = 1;
23
+ export declare const OverflowTypography: import("react").ForwardRefExoticComponent<Pick<OverflowedTypographyProps, "tabIndex" | "children" | "slot" | "title" | "key" | "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | ("fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "typography" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "rowsCount" | "tooltipProps"> & import("react").RefAttributes<HTMLElement>>;
24
+ export {};
@@ -0,0 +1,37 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import { forwardRef } from 'react';
25
+ import { Tooltip } from '../Tooltip';
26
+ import { OverflowTypographyWrapper } from './styles';
27
+ import { useOverflowed } from './hooks/useOverflowed';
28
+ export var DEFAULT_ROWS_COUNT = 1;
29
+ export var OverflowTypography = forwardRef(function (_a, forwardedRef) {
30
+ var tooltipProps = _a.tooltipProps, children = _a.children, _b = _a.rowsCount, rowsCount = _b === void 0 ? DEFAULT_ROWS_COUNT : _b, props = __rest(_a, ["tooltipProps", "children", "rowsCount"]);
31
+ var _c = useOverflowed(forwardedRef), ref = _c.ref, isOverflowed = _c.isOverflowed;
32
+ var typographyProps = __assign(__assign({}, props), { ref: ref, children: children, rowsCount: rowsCount });
33
+ if (children && isOverflowed) {
34
+ return (_jsx(Tooltip, __assign({ title: children, disableInteractive: true }, tooltipProps, { children: _jsx(OverflowTypographyWrapper, __assign({}, typographyProps)) })));
35
+ }
36
+ return _jsx(OverflowTypographyWrapper, __assign({}, typographyProps));
37
+ });
@@ -0,0 +1 @@
1
+ export * from './useOverflowed';
@@ -0,0 +1 @@
1
+ export * from './useOverflowed';
@@ -0,0 +1,5 @@
1
+ import { Ref } from 'react';
2
+ export declare const useOverflowed: (forwardedRef?: Ref<HTMLElement>) => {
3
+ isOverflowed: boolean;
4
+ ref: import("react").RefObject<HTMLElement>;
5
+ };
@@ -0,0 +1,23 @@
1
+ import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
2
+ import debounce from 'lodash-es/debounce';
3
+ export var useOverflowed = function (forwardedRef) {
4
+ var localRef = useRef(null);
5
+ var ref = forwardedRef && typeof forwardedRef !== 'function'
6
+ ? forwardedRef
7
+ : localRef;
8
+ var _a = useState(false), isOverflowed = _a[0], setOverflow = _a[1];
9
+ var handleResize = useCallback(debounce(function (_a) {
10
+ var _b = _a[0], target = _b.target, contentRect = _b.contentRect;
11
+ return setOverflow(contentRect.height < target.scrollHeight);
12
+ }, 500), []);
13
+ var resizeObserver = useMemo(function () { return new ResizeObserver(handleResize); }, []);
14
+ useLayoutEffect(function () {
15
+ if (ref === null || ref === void 0 ? void 0 : ref.current) {
16
+ var node_1 = ref.current;
17
+ resizeObserver.observe(node_1);
18
+ return function () { return resizeObserver.unobserve(node_1); };
19
+ }
20
+ return;
21
+ }, [ref.current]);
22
+ return { isOverflowed: isOverflowed, ref: ref };
23
+ };
@@ -0,0 +1 @@
1
+ export * from './OverflowTypography';
@@ -0,0 +1 @@
1
+ export * from './OverflowTypography';
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { OverflowedProps } from './OverflowTypography';
3
+ export declare const OverflowTypographyWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
4
+ align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
5
+ children?: import("react").ReactNode;
6
+ classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
7
+ gutterBottom?: boolean | undefined;
8
+ noWrap?: boolean | undefined;
9
+ paragraph?: boolean | undefined;
10
+ sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
11
+ variant?: "inherit" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | "div" | undefined;
12
+ variantMapping?: Partial<Record<"inherit" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | "div", string>> | undefined;
13
+ } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
14
+ ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
15
+ }, "children" | "variant" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | ("fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "typography" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
16
+ theme?: import("@emotion/react").Theme | undefined;
17
+ } & Required<OverflowedProps>, {}, {}>;
@@ -0,0 +1,13 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import { styled } from '../styles';
6
+ import { Typography } from '../Typography';
7
+ export var OverflowTypographyWrapper = styled(Typography, {
8
+ shouldForwardProp: function (name) { return name !== 'rowsCount'; },
9
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: initial;\n"], ["\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n display: -webkit-box;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: initial;\n"])), function (_a) {
10
+ var rowsCount = _a.rowsCount;
11
+ return rowsCount;
12
+ });
13
+ var templateObject_1;
package/esm/index.d.ts CHANGED
@@ -61,3 +61,4 @@ export * from './Notification';
61
61
  export * from './LocalizationProvider';
62
62
  export * from './ContentState';
63
63
  export * from './Chevron';
64
+ export * from './OverflowTypography';
package/esm/index.js CHANGED
@@ -61,3 +61,4 @@ export * from './Notification';
61
61
  export * from './LocalizationProvider';
62
62
  export * from './ContentState';
63
63
  export * from './Chevron';
64
+ export * from './OverflowTypography';
package/index.d.ts CHANGED
@@ -61,3 +61,4 @@ export * from './Notification';
61
61
  export * from './LocalizationProvider';
62
62
  export * from './ContentState';
63
63
  export * from './Chevron';
64
+ export * from './OverflowTypography';
package/index.js CHANGED
@@ -77,3 +77,4 @@ __exportStar(require("./Notification"), exports);
77
77
  __exportStar(require("./LocalizationProvider"), exports);
78
78
  __exportStar(require("./ContentState"), exports);
79
79
  __exportStar(require("./Chevron"), exports);
80
+ __exportStar(require("./OverflowTypography"), exports);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "0.42.1",
3
+ "version": "0.44.0",
4
4
  "browser": "./src/index.ts",
5
5
  "jest": {
6
6
  "moduleNameMapper": {
@@ -8,7 +8,7 @@
8
8
  }
9
9
  },
10
10
  "dependencies": {
11
- "@astral/icons": "^0.42.1",
11
+ "@astral/icons": "^0.44.0",
12
12
  "@emotion/cache": "11.7.1",
13
13
  "@emotion/react": "11.9.0",
14
14
  "@emotion/server": "11.4.0",
@@ -1,7 +0,0 @@
1
- import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
2
- import { TextFieldProps } from '../TextField';
3
- import { AutocompleteSizes } from './constants';
4
- export declare type AutocompleteSize = `${AutocompleteSizes}`;
5
- export declare type AutocompleteProps<AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = Omit<MuiAutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>, 'size' | 'renderInput'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label'> & {
6
- size?: AutocompleteSize;
7
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,4 +0,0 @@
1
- import { ModalProps, DialogTitleProps as MuiDialogTitleProps } from '@mui/material';
2
- export declare type DialogTitleProps = MuiDialogTitleProps & {
3
- onClose?: ModalProps['onClose'];
4
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,7 +0,0 @@
1
- import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
2
- import { TextFieldProps } from '../TextField';
3
- import { AutocompleteSizes } from './constants';
4
- export declare type AutocompleteSize = `${AutocompleteSizes}`;
5
- export declare type AutocompleteProps<AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = Omit<MuiAutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>, 'size' | 'renderInput'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label'> & {
6
- size?: AutocompleteSize;
7
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,4 +0,0 @@
1
- import { ModalProps, DialogTitleProps as MuiDialogTitleProps } from '@mui/material';
2
- export declare type DialogTitleProps = MuiDialogTitleProps & {
3
- onClose?: ModalProps['onClose'];
4
- };
@@ -1 +0,0 @@
1
- export {};