@e1011/es-kit 1.0.212 → 1.0.216

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.
@@ -1,46 +1,3 @@
1
- .layoutBox-module_layout-box__faPND {
2
- display: flex;
3
- position: relative;
4
- flex-direction: row;
5
- flex: 0;
6
- flex-grow: 0;
7
- flex-shrink: 0;
8
- flex-basis: auto;
9
- flex-wrap: nowrap;
10
- gap: 0;
11
- text-align: left;
12
- justify-content: flex-start;
13
- align-items: flex-start;
14
- align-self: auto;
15
- margin: 0;
16
- padding: 0;
17
- width: auto;
18
- height: auto;
19
- max-width: none;
20
- max-height: none;
21
- min-width: 0;
22
- min-height: 0;
23
- border-radius: initial;
24
- }
25
- .divider-module_divider-line__6CesR {
26
- position: relative;
27
- display: block;
28
- transition: opacity, width, height 250ms ease-in-out;
29
- background-color: var(--color);
30
- opacity: var(--opacity);
31
- }
32
- .divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
33
- height: var(--length);
34
- left: var(--left);
35
- width: var(--width);
36
- margin: var(--margin);
37
- }
38
- .divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
39
- width: var(--length);
40
- left: var(--left);
41
- height: var(--height);
42
- margin: var(--margin);
43
- }
44
1
  .icon-module_icon-base-parent__nOMvW {
45
2
  line-height: 1px !important;
46
3
  }
@@ -71,6 +28,30 @@
71
28
  width: var(--height);
72
29
  height: var(--width);
73
30
  }
31
+ .layoutBox-module_layout-box__faPND {
32
+ display: flex;
33
+ position: relative;
34
+ flex-direction: row;
35
+ flex: 0;
36
+ flex-grow: 0;
37
+ flex-shrink: 0;
38
+ flex-basis: auto;
39
+ flex-wrap: nowrap;
40
+ gap: 0;
41
+ text-align: left;
42
+ justify-content: flex-start;
43
+ align-items: flex-start;
44
+ align-self: auto;
45
+ margin: 0;
46
+ padding: 0;
47
+ width: auto;
48
+ height: auto;
49
+ max-width: none;
50
+ max-height: none;
51
+ min-width: 0;
52
+ min-height: 0;
53
+ border-radius: initial;
54
+ }
74
55
  .CollapsibleContainer-module_collapsible-container__u0Jmm {
75
56
  transform-origin: 0% 0%;
76
57
  opacity: 0;
@@ -104,6 +85,25 @@
104
85
  max-width: var(--prop-value);
105
86
  opacity: 1;
106
87
  }
88
+ .divider-module_divider-line__6CesR {
89
+ position: relative;
90
+ display: block;
91
+ transition: opacity, width, height 250ms ease-in-out;
92
+ background-color: var(--color);
93
+ opacity: var(--opacity);
94
+ }
95
+ .divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
96
+ height: var(--length);
97
+ left: var(--left);
98
+ width: var(--width);
99
+ margin: var(--margin);
100
+ }
101
+ .divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
102
+ width: var(--length);
103
+ left: var(--left);
104
+ height: var(--height);
105
+ margin: var(--margin);
106
+ }
107
107
  .flowLayout-module_flowLayout__VHpnY {
108
108
  overflow: auto;
109
109
  }
@@ -1,46 +1,3 @@
1
- .layoutBox-module_layout-box__faPND {
2
- display: flex;
3
- position: relative;
4
- flex-direction: row;
5
- flex: 0;
6
- flex-grow: 0;
7
- flex-shrink: 0;
8
- flex-basis: auto;
9
- flex-wrap: nowrap;
10
- gap: 0;
11
- text-align: left;
12
- justify-content: flex-start;
13
- align-items: flex-start;
14
- align-self: auto;
15
- margin: 0;
16
- padding: 0;
17
- width: auto;
18
- height: auto;
19
- max-width: none;
20
- max-height: none;
21
- min-width: 0;
22
- min-height: 0;
23
- border-radius: initial;
24
- }
25
- .divider-module_divider-line__6CesR {
26
- position: relative;
27
- display: block;
28
- transition: opacity, width, height 250ms ease-in-out;
29
- background-color: var(--color);
30
- opacity: var(--opacity);
31
- }
32
- .divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
33
- height: var(--length);
34
- left: var(--left);
35
- width: var(--width);
36
- margin: var(--margin);
37
- }
38
- .divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
39
- width: var(--length);
40
- left: var(--left);
41
- height: var(--height);
42
- margin: var(--margin);
43
- }
44
1
  .icon-module_icon-base-parent__nOMvW {
45
2
  line-height: 1px !important;
46
3
  }
@@ -71,6 +28,30 @@
71
28
  width: var(--height);
72
29
  height: var(--width);
73
30
  }
31
+ .layoutBox-module_layout-box__faPND {
32
+ display: flex;
33
+ position: relative;
34
+ flex-direction: row;
35
+ flex: 0;
36
+ flex-grow: 0;
37
+ flex-shrink: 0;
38
+ flex-basis: auto;
39
+ flex-wrap: nowrap;
40
+ gap: 0;
41
+ text-align: left;
42
+ justify-content: flex-start;
43
+ align-items: flex-start;
44
+ align-self: auto;
45
+ margin: 0;
46
+ padding: 0;
47
+ width: auto;
48
+ height: auto;
49
+ max-width: none;
50
+ max-height: none;
51
+ min-width: 0;
52
+ min-height: 0;
53
+ border-radius: initial;
54
+ }
74
55
  .CollapsibleContainer-module_collapsible-container__u0Jmm {
75
56
  transform-origin: 0% 0%;
76
57
  opacity: 0;
@@ -104,6 +85,25 @@
104
85
  max-width: var(--prop-value);
105
86
  opacity: 1;
106
87
  }
88
+ .divider-module_divider-line__6CesR {
89
+ position: relative;
90
+ display: block;
91
+ transition: opacity, width, height 250ms ease-in-out;
92
+ background-color: var(--color);
93
+ opacity: var(--opacity);
94
+ }
95
+ .divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
96
+ height: var(--length);
97
+ left: var(--left);
98
+ width: var(--width);
99
+ margin: var(--margin);
100
+ }
101
+ .divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
102
+ width: var(--length);
103
+ left: var(--left);
104
+ height: var(--height);
105
+ margin: var(--margin);
106
+ }
107
107
  .flowLayout-module_flowLayout__VHpnY {
108
108
  overflow: auto;
109
109
  }
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),s=require("../../../hooks/useParseProps.js"),a=require("./layoutBox.types.js"),o=require("./layoutBox.module.scss.js");const r={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},l=e=>e&&r[e]||e,n=t.forwardRef(((r,n)=>{let{id:i,style:u,children:d,tabIndex:c,className:x="",onClick:y,column:f,...m}=r;const{dataProps:p,restProps:j}=s.useParseProps(m),P=t.useMemo((()=>y?{onClick:y,onKeyDown:y,role:"button",tabIndex:-1}:{}),[y]),b=t.useMemo((()=>void 0!==f&&!0===f?a.LayoutDirection.COLUMN:null),[f]),B=t.useMemo((()=>({...j,...j.align?{alignItems:l(j.align)}:{},...j.justify?{justifyContent:l(j.justify)}:{},...j.direction||b?{flexDirection:j.direction||b}:{},...u})),[b,j,u]);return React.createElement("div",e.extends({},i?{id:"".concat(i)}:{},{ref:n,tabIndex:c,className:"".concat(o.default["layout-box"]," ").concat(x),style:B},p,{"data-testid":p.dataTestId||p["data-testid"]||i},P),d)}));n.displayName="LayoutBoxRefForwarded";const i=t.memo(n);i.displayName="LayoutBox",exports.LayoutBox=i;
1
+ "use strict";var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),s=require("../../../hooks/useParseProps.js"),a=require("./layoutBox.module.scss.js"),o=require("./layoutBox.types.js"),r=require("../../../utils/helpers/ui.js");const l={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},i=e=>e&&l[e]||e,u=t.forwardRef(((l,u)=>{let{id:n,style:d,children:c,tabIndex:x,className:y="",onClick:f,column:m,...p}=l;const{dataProps:j,restProps:P}=s.useParseProps(p),b=t.useMemo((()=>f?{onClick:f,onKeyDown:f,role:"button",tabIndex:-1}:{}),[f]),q=t.useMemo((()=>void 0!==m&&!0===m?o.LayoutDirection.COLUMN:null),[m]),B=t.useMemo((()=>({...P,...P.align?{alignItems:i(P.align)}:{},...P.justify?{justifyContent:i(P.justify)}:{},...P.direction||q?{flexDirection:P.direction||q}:{},...d})),[q,P,d]);return React.createElement("div",e.extends({},n?{id:"".concat(n)}:{},{ref:u,tabIndex:x,className:r.classNames(a.default["layout-box"],y),style:B},j,{"data-testid":j.dataTestId||j["data-testid"]||n},b),c)}));u.displayName="LayoutBoxRefForwarded";const n=t.memo(u);n.displayName="LayoutBox",exports.LayoutBox=n;
2
2
  //# sourceMappingURL=LayoutBox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n const { dataProps, restProps } = useParseProps(props)\n\n /**\n * Memoized onClick event properties.\n * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n */\n const onClickProps = useMemo(() => (onClick ? ({\n onClick,\n onKeyDown: onClick,\n role: 'button',\n tabIndex: -1,\n }) : {}), [onClick])\n\n /**\n * Memoized resolved direction based on the column prop.\n * @type {LayoutDirection}\n */\n const resolvedColumn = useMemo(() => ((\n column !== undefined && column === true)\n ? LayoutDirection.COLUMN\n : null), [column])\n\n /**\n * Memoized styles combining parsed props and additional styles.\n * @type {CSSProperties}\n */\n const styles = useMemo(() => (\n {\n ...restProps,\n ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n ...style,\n }\n ), [resolvedColumn, restProps, style])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={`${(classes as any)['layout-box']} ${className}`}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n {...onClickProps}\n >\n {children}\n </div>\n )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","default","dataTestId","displayName","LayoutBox","memo"],"mappings":"6NAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcH,GAMzCI,EAAeC,WAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,EAAOA,SAAC,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAAA,gBAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,EAAAA,SAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,CAAE,KAClFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,CAAE,KAC1Fb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,CAAE,KACtGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAOC,QAAS,cAAaF,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUwB,YAAcxB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBqC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBvC,GAElEsC,EAAUD,YAAc"}
1
+ {"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\nimport { classNames } from '../../../utils'\n\nimport classes from './layoutBox.module.scss'\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n const { dataProps, restProps } = useParseProps(props)\n\n /**\n * Memoized onClick event properties.\n * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n */\n const onClickProps = useMemo(() => (onClick ? ({\n onClick,\n onKeyDown: onClick,\n role: 'button',\n tabIndex: -1,\n }) : {}), [onClick])\n\n /**\n * Memoized resolved direction based on the column prop.\n * @type {LayoutDirection}\n */\n const resolvedColumn = useMemo(() => ((\n column !== undefined && column === true)\n ? LayoutDirection.COLUMN\n : null), [column])\n\n /**\n * Memoized styles combining parsed props and additional styles.\n * @type {CSSProperties}\n */\n const styles = useMemo(() => (\n {\n ...restProps,\n ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n ...style,\n }\n ), [resolvedColumn, restProps, style])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={classNames(\n classes['layout-box'],\n className,\n )}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n {...onClickProps}\n >\n {children}\n </div>\n )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classNames","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"uQAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcH,GAMzCI,EAAeC,WAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,EAAOA,SAAC,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAAA,gBAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,EAAAA,SAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,CAAE,KAClFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,CAAE,KAC1Fb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,CAAE,KACtGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAW0B,EAAAA,WACTC,EAAAA,QAAQ,cACR3B,GAEFH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUwB,YAAcxB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBqC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBvC,GAElEsC,EAAUD,YAAc"}
@@ -1,2 +1,2 @@
1
- import{extends as t}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as e,forwardRef as o,useMemo as a}from"react";import{useParseProps as s}from"../../../hooks/useParseProps.js";import{LayoutDirection as l}from"./layoutBox.types.js";import r from"./layoutBox.module.scss.js";const n={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},i=t=>t&&n[t]||t,d=o(((e,o)=>{let{id:n,style:d,children:c,tabIndex:m,className:f="",onClick:u,column:x,...p}=e;const{dataProps:y,restProps:j}=s(p),b=a((()=>u?{onClick:u,onKeyDown:u,role:"button",tabIndex:-1}:{}),[u]),B=a((()=>void 0!==x&&!0===x?l.COLUMN:null),[x]),I=a((()=>({...j,...j.align?{alignItems:i(j.align)}:{},...j.justify?{justifyContent:i(j.justify)}:{},...j.direction||B?{flexDirection:j.direction||B}:{},...d})),[B,j,d]);return React.createElement("div",t({},n?{id:"".concat(n)}:{},{ref:o,tabIndex:m,className:"".concat(r["layout-box"]," ").concat(f),style:I},y,{"data-testid":y.dataTestId||y["data-testid"]||n},b),c)}));d.displayName="LayoutBoxRefForwarded";const c=e(d);c.displayName="LayoutBox";export{c as LayoutBox};
1
+ import{extends as t}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as e,forwardRef as o,useMemo as s}from"react";import{useParseProps as a}from"../../../hooks/useParseProps.js";import r from"./layoutBox.module.scss.js";import{LayoutDirection as l}from"./layoutBox.types.js";import{classNames as i}from"../../../utils/helpers/ui.js";const n={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},d=t=>t&&n[t]||t,m=o(((e,o)=>{let{id:n,style:m,children:u,tabIndex:c,className:f="",onClick:x,column:p,...y}=e;const{dataProps:j,restProps:b}=a(y),B=s((()=>x?{onClick:x,onKeyDown:x,role:"button",tabIndex:-1}:{}),[x]),I=s((()=>void 0!==p&&!0===p?l.COLUMN:null),[p]),N=s((()=>({...b,...b.align?{alignItems:d(b.align)}:{},...b.justify?{justifyContent:d(b.justify)}:{},...b.direction||I?{flexDirection:b.direction||I}:{},...m})),[I,b,m]);return React.createElement("div",t({},n?{id:"".concat(n)}:{},{ref:o,tabIndex:c,className:i(r["layout-box"],f),style:N},j,{"data-testid":j.dataTestId||j["data-testid"]||n},B),u)}));m.displayName="LayoutBoxRefForwarded";const u=e(m);u.displayName="LayoutBox";export{u as LayoutBox};
2
2
  //# sourceMappingURL=LayoutBox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n const { dataProps, restProps } = useParseProps(props)\n\n /**\n * Memoized onClick event properties.\n * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n */\n const onClickProps = useMemo(() => (onClick ? ({\n onClick,\n onKeyDown: onClick,\n role: 'button',\n tabIndex: -1,\n }) : {}), [onClick])\n\n /**\n * Memoized resolved direction based on the column prop.\n * @type {LayoutDirection}\n */\n const resolvedColumn = useMemo(() => ((\n column !== undefined && column === true)\n ? LayoutDirection.COLUMN\n : null), [column])\n\n /**\n * Memoized styles combining parsed props and additional styles.\n * @type {CSSProperties}\n */\n const styles = useMemo(() => (\n {\n ...restProps,\n ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n ...style,\n }\n ), [resolvedColumn, restProps, style])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={`${(classes as any)['layout-box']} ${className}`}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n {...onClickProps}\n >\n {children}\n </div>\n )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"0SAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAcH,GAMzCI,EAAeC,GAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,GAAQ,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,GAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,CAAE,KAClFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,CAAE,KAC1Fb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,CAAE,KACtGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAgB,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAqBtC,GAElEqC,EAAUD,YAAc"}
1
+ {"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\nimport { classNames } from '../../../utils'\n\nimport classes from './layoutBox.module.scss'\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n const { dataProps, restProps } = useParseProps(props)\n\n /**\n * Memoized onClick event properties.\n * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n */\n const onClickProps = useMemo(() => (onClick ? ({\n onClick,\n onKeyDown: onClick,\n role: 'button',\n tabIndex: -1,\n }) : {}), [onClick])\n\n /**\n * Memoized resolved direction based on the column prop.\n * @type {LayoutDirection}\n */\n const resolvedColumn = useMemo(() => ((\n column !== undefined && column === true)\n ? LayoutDirection.COLUMN\n : null), [column])\n\n /**\n * Memoized styles combining parsed props and additional styles.\n * @type {CSSProperties}\n */\n const styles = useMemo(() => (\n {\n ...restProps,\n ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n ...style,\n }\n ), [resolvedColumn, restProps, style])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={classNames(\n classes['layout-box'],\n className,\n )}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n {...onClickProps}\n >\n {children}\n </div>\n )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classNames","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"oWAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAcH,GAMzCI,EAAeC,GAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,GAAQ,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,GAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,CAAE,KAClFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,CAAE,KAC1Fb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,CAAE,KACtGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAW0B,EACTC,EAAQ,cACR3B,GAEFH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUwB,YAAcxB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBqC,YAAc,8BAMvBC,EAAgCC,EAAqBvC,GAElEsC,EAAUD,YAAc"}