@tiny-codes/react-easy 1.7.0 → 1.7.1

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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
2
2
 
3
3
  # Changelog
4
4
 
5
+ ## 1.7.1
6
+
7
+ 2026-2-12
8
+
9
+ ### Features
10
+
11
+ - **withEllipsisTypography**
12
+ - ✨ Set default value for `ellipsis` prop to `true`. It affects `EllipsisTitle`, `EllipsisText`, and `EllipsisParagraph` components.
13
+
5
14
  ## 1.7.0
6
15
 
7
16
  2026-2-6
@@ -18,7 +18,8 @@ import { Tooltip } from 'antd';
18
18
  import { jsx as _jsx } from "react/jsx-runtime";
19
19
  function withEllipsisTypography(Component) {
20
20
  return function EllipsisText(props) {
21
- var ellipsis = props.ellipsis,
21
+ var _props$ellipsis = props.ellipsis,
22
+ ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
22
23
  text = props.text,
23
24
  rest = _objectWithoutProperties(props, _excluded);
24
25
  var _useState = useState(false),
@@ -1 +1 @@
1
- {"version":3,"names":["useEffect","useMemo","useState","Tooltip","jsx","_jsx","withEllipsisTypography","Component","EllipsisText","props","ellipsis","text","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isEllipsis","setIsEllipsis","_useState3","_useState4","dom","setDom","isAutoEllipsis","isAutoTooltip","_typeof","tooltip","isAutoTooltipTitle","title","isAuto","tooltipTitle","undefined","Promise","resolve","then","scrollWidth","clientWidth","scrollHeight","clientHeight","_objectSpread","children","ref"],"sources":["../../../src/components/EllipsisTypography/withEllipsisTypography.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis, text, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);\n });\n }\n }, [text, isAuto, dom]);\n\n return (\n <Tooltip {...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps)} title={tooltipTitle}>\n <Component\n ref={setDom}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(rest as any)}\n ellipsis={\n isAutoEllipsis\n ? { tooltip: undefined }\n : isAutoTooltip\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: undefined,\n }\n : isAutoTooltipTitle\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: {\n ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),\n title: undefined,\n },\n }\n : ellipsis\n }\n >\n {text}\n </Component>\n </Tooltip>\n );\n };\n}\n\nexport type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {\n text: string | undefined;\n};\n\nexport default withEllipsisTypography;\n"],"mappings":"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"}
1
+ {"version":3,"names":["useEffect","useMemo","useState","Tooltip","jsx","_jsx","withEllipsisTypography","Component","EllipsisText","props","_props$ellipsis","ellipsis","text","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isEllipsis","setIsEllipsis","_useState3","_useState4","dom","setDom","isAutoEllipsis","isAutoTooltip","_typeof","tooltip","isAutoTooltipTitle","title","isAuto","tooltipTitle","undefined","Promise","resolve","then","scrollWidth","clientWidth","scrollHeight","clientHeight","_objectSpread","children","ref"],"sources":["../../../src/components/EllipsisTypography/withEllipsisTypography.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis = true, text, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);\n });\n }\n }, [text, isAuto, dom]);\n\n return (\n <Tooltip {...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps)} title={tooltipTitle}>\n <Component\n ref={setDom}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(rest as any)}\n ellipsis={\n isAutoEllipsis\n ? { tooltip: undefined }\n : isAutoTooltip\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: undefined,\n }\n : isAutoTooltipTitle\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: {\n ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),\n title: undefined,\n },\n }\n : ellipsis\n }\n >\n {text}\n </Component>\n </Tooltip>\n );\n };\n}\n\nexport type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {\n text: string | undefined;\n};\n\nexport default withEllipsisTypography;\n"],"mappings":"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"}
@@ -8,6 +8,7 @@ var genStyle = function genStyle(token) {
8
8
  return _defineProperty({}, componentCls, {
9
9
  display: 'flex',
10
10
  flexWrap: 'wrap',
11
+ alignItems: 'center',
11
12
  width: '100%',
12
13
  maxWidth: '100%',
13
14
  position: 'relative'
@@ -1 +1 @@
1
- {"version":3,"names":["genStyleHooks","genStyle","token","componentCls","_defineProperty","display","flexWrap","width","maxWidth","position"],"sources":["../../../../src/components/OverflowTags/style/index.ts"],"sourcesContent":["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n display: 'flex',\n flexWrap: 'wrap',\n width: '100%',\n maxWidth: '100%',\n position: 'relative',\n },\n };\n};\n\nexport default genStyleHooks('EasyOverflowTags' as never, genStyle);\n"],"mappings":";;;;AAAA,SAASA,aAAa,QAAQ,wBAAwB;AAOtD,IAAMC,QAA0C,GAAG,SAA7CA,QAA0CA,CAAIC,KAAK,EAAgB;EACvE,IAAQC,YAAY,GAAKD,KAAK,CAAtBC,YAAY;EACpB,OAAAC,eAAA,KACGD,YAAY,EAAG;IACdE,OAAO,EAAE,MAAM;IACfC,QAAQ,EAAE,MAAM;IAChBC,KAAK,EAAE,MAAM;IACbC,QAAQ,EAAE,MAAM;IAChBC,QAAQ,EAAE;EACZ,CAAC;AAEL,CAAC;AAED,eAAeT,aAAa,CAAC,kBAAkB,EAAWC,QAAQ,CAAC"}
1
+ {"version":3,"names":["genStyleHooks","genStyle","token","componentCls","_defineProperty","display","flexWrap","alignItems","width","maxWidth","position"],"sources":["../../../../src/components/OverflowTags/style/index.ts"],"sourcesContent":["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n width: '100%',\n maxWidth: '100%',\n position: 'relative',\n },\n };\n};\n\nexport default genStyleHooks('EasyOverflowTags' as never, genStyle);\n"],"mappings":";;;;AAAA,SAASA,aAAa,QAAQ,wBAAwB;AAOtD,IAAMC,QAA0C,GAAG,SAA7CA,QAA0CA,CAAIC,KAAK,EAAgB;EACvE,IAAQC,YAAY,GAAKD,KAAK,CAAtBC,YAAY;EACpB,OAAAC,eAAA,KACGD,YAAY,EAAG;IACdE,OAAO,EAAE,MAAM;IACfC,QAAQ,EAAE,MAAM;IAChBC,UAAU,EAAE,QAAQ;IACpBC,KAAK,EAAE,MAAM;IACbC,QAAQ,EAAE,MAAM;IAChBC,QAAQ,EAAE;EACZ,CAAC;AAEL,CAAC;AAED,eAAeV,aAAa,CAAC,kBAAkB,EAAWC,QAAQ,CAAC"}
@@ -26,7 +26,7 @@ var import_react = require("react");
26
26
  var import_antd = require("antd");
27
27
  function withEllipsisTypography(Component) {
28
28
  return function EllipsisText(props) {
29
- const { ellipsis, text, ...rest } = props;
29
+ const { ellipsis = true, text, ...rest } = props;
30
30
  const [isEllipsis, setIsEllipsis] = (0, import_react.useState)(false);
31
31
  const [dom, setDom] = (0, import_react.useState)(null);
32
32
  const isAutoEllipsis = (0, import_react.useMemo)(() => ellipsis === true, [ellipsis]);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/EllipsisTypography/withEllipsisTypography.tsx"],
4
- "sourcesContent": ["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis, text, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);\n });\n }\n }, [text, isAuto, dom]);\n\n return (\n <Tooltip {...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps)} title={tooltipTitle}>\n <Component\n ref={setDom}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(rest as any)}\n ellipsis={\n isAutoEllipsis\n ? { tooltip: undefined }\n : isAutoTooltip\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: undefined,\n }\n : isAutoTooltipTitle\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: {\n ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),\n title: undefined,\n },\n }\n : ellipsis\n }\n >\n {text}\n </Component>\n </Tooltip>\n );\n };\n}\n\nexport type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {\n text: string | undefined;\n};\n\nexport default withEllipsisTypography;\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAE7C,kBAAwB;AAMxB,SAAS,uBACP,WACA;AACA,SAAO,SAAS,aAAa,OAAuC;AAClE,UAAM,EAAE,UAAU,MAAM,GAAG,KAAK,IAAI;AACpC,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,UAAM,CAAC,KAAK,MAAM,QAAI,uBAA6B,IAAI;AACvD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,MAAM,CAAC,QAAQ,CAAC;AAClE,UAAM,oBAAgB,sBAAQ,MAAM,OAAO,aAAa,YAAY,SAAS,YAAY,MAAM,CAAC,QAAQ,CAAC;AACzG,UAAM,yBAAqB;AAAA,MACzB,MACE,OAAO,aAAa,YACpB,SAAS,WACT,OAAO,SAAS,YAAY,YAC5B,WAAW,SAAS,WACpB,SAAS,QAAQ,UAAU;AAAA,MAC7B,CAAC,QAAQ;AAAA,IACX;AACA,UAAM,aAAS;AAAA,MACb,MAAM,kBAAkB,iBAAiB;AAAA,MACzC,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,IACpD;AACA,UAAM,mBAAe,sBAAQ,MAAO,aAAa,OAAO,QAAY,CAAC,YAAY,IAAI,CAAC;AAEtF,gCAAU,MAAM;AACd,UAAI,OAAO,QAAQ;AACjB,gBAAQ,QAAQ,EAAE,KAAK,MAAM;AAC3B,wBAAc,IAAI,cAAc,IAAI,eAAe,IAAI,eAAe,IAAI,YAAY;AAAA,QACxF,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC;AAEtB,WACE,oCAAC,uBAAS,GAAK,qCAA6B,SAA0B,OAAO,gBAC3E;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QAEJ,GAAI;AAAA,QACL,UACE,iBACI,EAAE,SAAS,OAAU,IACrB,gBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,QACX,IACA,qBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,YACP,GAAK,qCAA6B;AAAA,YAClC,OAAO;AAAA,UACT;AAAA,QACF,IACA;AAAA;AAAA,MAGT;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AAMA,IAAO,iCAAQ;",
4
+ "sourcesContent": ["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis = true, text, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);\n });\n }\n }, [text, isAuto, dom]);\n\n return (\n <Tooltip {...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps)} title={tooltipTitle}>\n <Component\n ref={setDom}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(rest as any)}\n ellipsis={\n isAutoEllipsis\n ? { tooltip: undefined }\n : isAutoTooltip\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: undefined,\n }\n : isAutoTooltipTitle\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: {\n ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),\n title: undefined,\n },\n }\n : ellipsis\n }\n >\n {text}\n </Component>\n </Tooltip>\n );\n };\n}\n\nexport type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {\n text: string | undefined;\n};\n\nexport default withEllipsisTypography;\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAE7C,kBAAwB;AAMxB,SAAS,uBACP,WACA;AACA,SAAO,SAAS,aAAa,OAAuC;AAClE,UAAM,EAAE,WAAW,MAAM,MAAM,GAAG,KAAK,IAAI;AAC3C,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,UAAM,CAAC,KAAK,MAAM,QAAI,uBAA6B,IAAI;AACvD,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,MAAM,CAAC,QAAQ,CAAC;AAClE,UAAM,oBAAgB,sBAAQ,MAAM,OAAO,aAAa,YAAY,SAAS,YAAY,MAAM,CAAC,QAAQ,CAAC;AACzG,UAAM,yBAAqB;AAAA,MACzB,MACE,OAAO,aAAa,YACpB,SAAS,WACT,OAAO,SAAS,YAAY,YAC5B,WAAW,SAAS,WACpB,SAAS,QAAQ,UAAU;AAAA,MAC7B,CAAC,QAAQ;AAAA,IACX;AACA,UAAM,aAAS;AAAA,MACb,MAAM,kBAAkB,iBAAiB;AAAA,MACzC,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,IACpD;AACA,UAAM,mBAAe,sBAAQ,MAAO,aAAa,OAAO,QAAY,CAAC,YAAY,IAAI,CAAC;AAEtF,gCAAU,MAAM;AACd,UAAI,OAAO,QAAQ;AACjB,gBAAQ,QAAQ,EAAE,KAAK,MAAM;AAC3B,wBAAc,IAAI,cAAc,IAAI,eAAe,IAAI,eAAe,IAAI,YAAY;AAAA,QACxF,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC;AAEtB,WACE,oCAAC,uBAAS,GAAK,qCAA6B,SAA0B,OAAO,gBAC3E;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QAEJ,GAAI;AAAA,QACL,UACE,iBACI,EAAE,SAAS,OAAU,IACrB,gBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,QACX,IACA,qBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,YACP,GAAK,qCAA6B;AAAA,YAClC,OAAO;AAAA,UACT;AAAA,QACF,IACA;AAAA;AAAA,MAGT;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AAMA,IAAO,iCAAQ;",
6
6
  "names": []
7
7
  }
@@ -29,6 +29,7 @@ var genStyle = (token) => {
29
29
  [componentCls]: {
30
30
  display: "flex",
31
31
  flexWrap: "wrap",
32
+ alignItems: "center",
32
33
  width: "100%",
33
34
  maxWidth: "100%",
34
35
  position: "relative"
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/OverflowTags/style/index.ts"],
4
- "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n display: 'flex',\n flexWrap: 'wrap',\n width: '100%',\n maxWidth: '100%',\n position: 'relative',\n },\n };\n};\n\nexport default genStyleHooks('EasyOverflowTags' as never, genStyle);\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8B;AAO9B,IAAM,WAA6C,CAAC,UAAqB;AACvE,QAAM,EAAE,aAAa,IAAI;AACzB,SAAO;AAAA,IACL,CAAC,YAAY,GAAG;AAAA,MACd,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AAEA,IAAO,oBAAQ,+BAAc,oBAA6B,QAAQ;",
4
+ "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {\n const { componentCls } = token;\n return {\n [componentCls]: {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n width: '100%',\n maxWidth: '100%',\n position: 'relative',\n },\n };\n};\n\nexport default genStyleHooks('EasyOverflowTags' as never, genStyle);\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8B;AAO9B,IAAM,WAA6C,CAAC,UAAqB;AACvE,QAAM,EAAE,aAAa,IAAI;AACzB,SAAO;AAAA,IACL,CAAC,YAAY,GAAG;AAAA,MACd,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AAEA,IAAO,oBAAQ,+BAAc,oBAA6B,QAAQ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tiny-codes/react-easy",
3
- "version": "1.7.0",
3
+ "version": "1.7.1",
4
4
  "description": "Simplify React and AntDesign development with practical components and hooks",
5
5
  "keywords": [
6
6
  "react",