@frontify/fondue 12.0.0-beta.301 → 12.0.0-beta.303
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/dist/components/Tree/TreeItem/TreeItem.es.js +22 -22
- package/dist/components/Tree/TreeItem/TreeItem.es.js.map +1 -1
- package/dist/foundation/Icon/Generated/IconTarget16.es.js +1 -1
- package/dist/foundation/Icon/Generated/IconTarget16.es.js.map +1 -1
- package/dist/foundation/Icon/Generated/IconTarget20.es.js +3 -3
- package/dist/foundation/Icon/Generated/IconTarget20.es.js.map +1 -1
- package/dist/foundation/Icon/Generated/IconTarget24.es.js +1 -1
- package/dist/foundation/Icon/Generated/IconTarget24.es.js.map +1 -1
- package/dist/foundation/Icon/Generated/IconTarget32.es.js +1 -1
- package/dist/foundation/Icon/Generated/IconTarget32.es.js.map +1 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
|
@@ -12,12 +12,12 @@ import { useTreeItem as jt } from "./useTreeItem.es.js";
|
|
|
12
12
|
import { EXPAND_ONHOVER_DELAY as te, INDENTATION_WIDTH as wt } from "../helpers/constants.es.js";
|
|
13
13
|
import { removeFragmentsAndEnrichChildren as ee } from "../utils/removeFragmentsAndEnrichChildren.es.js";
|
|
14
14
|
import { useDeepCompareEffect as se } from "../utils/useDeepCompareEffect.es.js";
|
|
15
|
-
const ae = ({ isSorting: s, wasDragging:
|
|
15
|
+
const ae = ({ isSorting: s, wasDragging: v }) => !(s || v), re = Ut(
|
|
16
16
|
({
|
|
17
17
|
id: s,
|
|
18
|
-
type:
|
|
18
|
+
type: v,
|
|
19
19
|
label: i,
|
|
20
|
-
onDrop:
|
|
20
|
+
onDrop: A,
|
|
21
21
|
accepts: ft,
|
|
22
22
|
showCaret: $,
|
|
23
23
|
children: c,
|
|
@@ -38,17 +38,17 @@ const ae = ({ isSorting: s, wasDragging: A }) => !(s || A), re = Ut(
|
|
|
38
38
|
"data-test-id": ht = "fondue-tree-item"
|
|
39
39
|
}) => {
|
|
40
40
|
var J, O, Q, Z, C, P, j, tt, et, st, at, rt, dt, nt, ot;
|
|
41
|
-
const { active: d, over: N } = Gt(), { isSelected: u, isExpanded: m, projection: e } = jt(s),
|
|
42
|
-
|
|
41
|
+
const { active: d, over: N } = Gt(), { isSelected: u, isExpanded: m, projection: e } = jt(s), z = Xt(), V = it && ct, a = (d == null ? void 0 : d.id) === s, t = a && e !== null && e !== void 0 ? e : null, gt = typeof ((O = (J = N == null ? void 0 : N.data) == null ? void 0 : J.current) == null ? void 0 : O.accepts) == "string" ? (Q = N.data.current.accepts) == null ? void 0 : Q.split(", ") : [], Dt = typeof (t == null ? void 0 : t.accepts) == "string" ? (Z = t.accepts) == null ? void 0 : Z.split(", ") : [], h = ((C = d == null ? void 0 : d.data.current) == null ? void 0 : C.type) || "", g = ((P = e == null ? void 0 : e.previousNode) == null ? void 0 : P.depth) !== void 0 && (e == null ? void 0 : e.depth) > ((j = e == null ? void 0 : e.previousNode) == null ? void 0 : j.depth), It = g && e.depth - 1 === ((tt = e == null ? void 0 : e.previousNode) == null ? void 0 : tt.depth), B = g && ((et = e == null ? void 0 : e.previousNode) == null ? void 0 : et.accepts) !== void 0 && (((st = e == null ? void 0 : e.previousNode) == null ? void 0 : st.accepts.includes(`${h}-deeper`)) || ((at = e == null ? void 0 : e.previousNode) == null ? void 0 : at.accepts.includes(`${h}-within`))), xt = a && It && ((rt = t == null ? void 0 : t.previousNode) == null ? void 0 : rt.accepts) !== void 0 && ((dt = t == null ? void 0 : t.previousNode) == null ? void 0 : dt.accepts.includes(`${h}-within`)) || (t == null ? void 0 : t.isWithinParent) && Dt.includes(`${h}-within`), D = a && (d == null ? void 0 : d.data.current) && (gt.includes(h) && !g || xt), Y = mt((r) => {
|
|
42
|
+
z.current === r && (p == null || p(r));
|
|
43
43
|
}, te);
|
|
44
44
|
kt(() => {
|
|
45
45
|
var r, o, w;
|
|
46
|
-
a && (
|
|
46
|
+
a && (z.current = g ? (r = t == null ? void 0 : t.previousNode) == null ? void 0 : r.id : null), a && B && (t != null && t.parentId) && t.previousNode && t.parentId === t.previousNode.id && t.parentId !== ((w = (o = d == null ? void 0 : d.data) == null ? void 0 : o.current) == null ? void 0 : w.parentId) && Y(t == null ? void 0 : t.parentId);
|
|
47
47
|
}, [
|
|
48
48
|
d == null ? void 0 : d.data,
|
|
49
49
|
t == null ? void 0 : t.parentId,
|
|
50
50
|
t == null ? void 0 : t.previousNode,
|
|
51
|
-
|
|
51
|
+
Y,
|
|
52
52
|
a,
|
|
53
53
|
B,
|
|
54
54
|
g
|
|
@@ -57,7 +57,7 @@ const ae = ({ isSorting: s, wasDragging: A }) => !(s || A), re = Ut(
|
|
|
57
57
|
(r) => {
|
|
58
58
|
var lt;
|
|
59
59
|
const { over: o, active: w } = r;
|
|
60
|
-
!a || !t || w.id === (o == null ? void 0 : o.id) && (t == null ? void 0 : t.depth) === ((lt = w.data.current) == null ? void 0 : lt.level) || a && o && D &&
|
|
60
|
+
!a || !t || w.id === (o == null ? void 0 : o.id) && (t == null ? void 0 : t.depth) === ((lt = w.data.current) == null ? void 0 : lt.level) || a && o && D && A && A({
|
|
61
61
|
id: w.id,
|
|
62
62
|
parentId: t.parentId,
|
|
63
63
|
sort: t.position,
|
|
@@ -65,7 +65,7 @@ const ae = ({ isSorting: s, wasDragging: A }) => !(s || A), re = Ut(
|
|
|
65
65
|
parentType: t.type
|
|
66
66
|
});
|
|
67
67
|
},
|
|
68
|
-
[a, t, D,
|
|
68
|
+
[a, t, D, A, b]
|
|
69
69
|
), yt = T(
|
|
70
70
|
(r) => {
|
|
71
71
|
r.active.id === s && (x == null || x({ contentComponent: b, children: c, id: s, label: i, level: l }));
|
|
@@ -92,14 +92,14 @@ const ae = ({ isSorting: s, wasDragging: A }) => !(s || A), re = Ut(
|
|
|
92
92
|
r.stopPropagation(), !(S && r.detail >= 2) && (bt && K(), W == null || W(s), R == null || R(s));
|
|
93
93
|
},
|
|
94
94
|
S ? 300 : 0
|
|
95
|
-
), U = L && (d == null ? void 0 : d.id) === L, X = pt.count(c) > 0, { enrichedChildren: F, childrenIds:
|
|
95
|
+
), U = L && (d == null ? void 0 : d.id) === L, X = pt.count(c) > 0, { enrichedChildren: F, childrenIds: vt } = ut(() => {
|
|
96
96
|
const r = ee(c, { parentId: s, level: l + 1 });
|
|
97
97
|
return {
|
|
98
98
|
enrichedChildren: r,
|
|
99
99
|
childrenIds: r.map((o) => o.props.id)
|
|
100
100
|
};
|
|
101
101
|
}, [c, s, l]), {
|
|
102
|
-
attributes:
|
|
102
|
+
attributes: At,
|
|
103
103
|
listeners: Lt,
|
|
104
104
|
transform: y,
|
|
105
105
|
transition: Rt,
|
|
@@ -108,8 +108,8 @@ const ae = ({ isSorting: s, wasDragging: A }) => !(s || A), re = Ut(
|
|
|
108
108
|
setActivatorNodeRef: Bt
|
|
109
109
|
} = qt({
|
|
110
110
|
id: s,
|
|
111
|
-
disabled: !
|
|
112
|
-
data: { type:
|
|
111
|
+
disabled: !V,
|
|
112
|
+
data: { type: v, accepts: ft, parentId: L, level: l },
|
|
113
113
|
animateLayoutChanges: ae,
|
|
114
114
|
transition: null
|
|
115
115
|
});
|
|
@@ -135,17 +135,17 @@ const ae = ({ isSorting: s, wasDragging: A }) => !(s || A), re = Ut(
|
|
|
135
135
|
!a && !u && "group-active:tw-bg-box-neutral-pressed",
|
|
136
136
|
!a && u ? "tw-bg-box-neutral-strong hover:tw-bg-box-neutral-strong-hover" : "group-hover:tw-bg-box-neutral"
|
|
137
137
|
])
|
|
138
|
-
}), [a, u]), Mt = !a, $t = m && !a, H =
|
|
138
|
+
}), [a, u]), Mt = !a, $t = m && !a, H = V && !a, St = i !== void 0 && !a, E = !a && ($ === void 0 ? X : $);
|
|
139
139
|
let k = "";
|
|
140
140
|
!a && !m && E && B && ((nt = e == null ? void 0 : e.previousNode) == null ? void 0 : nt.id) === s && (e == null ? void 0 : e.depth) > ((ot = e == null ? void 0 : e.previousNode) == null ? void 0 : ot.depth) && (k = "tw-border-solid tw-rounded tw-border-2 tw-border-box-selected-strong");
|
|
141
|
-
const
|
|
142
|
-
"tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-full",
|
|
141
|
+
const zt = M([
|
|
142
|
+
"tw-relative tw-z-0 tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-full",
|
|
143
143
|
a ? "tw-border-dashed tw-rounded-sm tw-border-2 tw-pr-0 tw-h-12" : "tw-h-10",
|
|
144
144
|
a && (D ? "tw-border-box-selected-strong tw-bg-box-selected-hover" : "tw-bg-box-negative-hover tw-border-box-negative-strong-hover"),
|
|
145
145
|
k
|
|
146
|
-
]), q = t != null && t.depth ? t.depth * wt : void 0, G = a ? 0 : l * wt,
|
|
146
|
+
]), q = t != null && t.depth ? t.depth * wt : void 0, G = a ? 0 : l * wt, Vt = {
|
|
147
147
|
paddingLeft: q ?? G
|
|
148
|
-
},
|
|
148
|
+
}, Yt = {
|
|
149
149
|
marginLeft: -1 * (q ?? G)
|
|
150
150
|
}, Kt = {
|
|
151
151
|
transform: Ot.Transform.toString(y),
|
|
@@ -158,7 +158,7 @@ const ae = ({ isSorting: s, wasDragging: A }) => !(s || A), re = Ut(
|
|
|
158
158
|
key: s,
|
|
159
159
|
tabIndex: 0,
|
|
160
160
|
role: "treeitem",
|
|
161
|
-
style:
|
|
161
|
+
style: Vt,
|
|
162
162
|
onKeyDown: Qt,
|
|
163
163
|
"aria-label": i,
|
|
164
164
|
"aria-level": l + 1,
|
|
@@ -169,13 +169,13 @@ const ae = ({ isSorting: s, wasDragging: A }) => !(s || A), re = Ut(
|
|
|
169
169
|
"aria-selected": u,
|
|
170
170
|
"aria-expanded": m,
|
|
171
171
|
"data-has-children": X,
|
|
172
|
-
"aria-owns":
|
|
172
|
+
"aria-owns": vt.join(" ")
|
|
173
173
|
},
|
|
174
|
-
/* @__PURE__ */ f.createElement("div", { ref: Wt, className:
|
|
174
|
+
/* @__PURE__ */ f.createElement("div", { ref: Wt, className: zt, style: Kt }, /* @__PURE__ */ f.createElement("span", { className: Ht, style: Yt, "aria-hidden": !0 }), /* @__PURE__ */ f.createElement(
|
|
175
175
|
Ct,
|
|
176
176
|
{
|
|
177
177
|
...Lt,
|
|
178
|
-
...
|
|
178
|
+
...At,
|
|
179
179
|
active: u,
|
|
180
180
|
ref: Bt,
|
|
181
181
|
disabled: !H,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeItem.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, MouseEvent, memo, useCallback, useEffect, useMemo, useRef } from 'react';\nimport { AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { useDndContext, useDndMonitor } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport noop from 'lodash-es/noop';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport type {\n RegisterNodeChildrenPayload,\n TreeDragEndEvent,\n TreeDragMoveEvent,\n TreeDragStartEvent,\n TreeItemProps,\n} from '@components/Tree/types';\n\nimport { EXPAND_ONHOVER_DELAY, INDENTATION_WIDTH, Projection } from '../helpers';\nimport { removeFragmentsAndEnrichChildren, useDeepCompareEffect } from '../utils';\n\nimport { DragHandle } from './DragHandle';\nimport { Overlay } from './TreeItemOverlay';\nimport { ExpandButton } from './ExpandButton';\nimport { useDebounce } from '@hooks/useDebounce';\nimport { useTreeItem } from './useTreeItem';\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>\n isSorting || wasDragging ? false : true;\n\n/** @private */\ntype TreeItemPrivateProps = {\n level?: number;\n levelConstraint?: Nullable<number>;\n parentId?: string;\n isSelected?: boolean;\n isExpanded?: boolean;\n treeDraggable?: boolean;\n /** onSelect is passed by the Tree component when cloning the TreeItem */\n onSelect?: (id: string) => void;\n /** onClick is the user defined callback to run after the onSelect */\n onClick?: (id: string) => void;\n onExpand?: (id: string) => void;\n onShrink?: (id: string) => void;\n projection?: Nullable<Projection>;\n registerOverlay?: (overlay: Overlay) => void;\n unregisterNodeChildren?: (payload: string) => void;\n registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void;\n};\n\n/** @private */\nexport type InternalTreeItemProps = TreeItemProps & TreeItemPrivateProps;\n\nexport const TreeItem = memo(\n ({\n id,\n type,\n label,\n onDrop,\n accepts,\n showCaret,\n children,\n parentId,\n level = 0,\n contentComponent,\n treeDraggable = false,\n onClick,\n onSelect,\n onExpand,\n onShrink,\n registerOverlay,\n registerNodeChildren,\n unregisterNodeChildren,\n draggable: itemDraggable = true,\n ignoreItemDoubleClick = false,\n expandOnSelect = false,\n 'data-test-id': dataTestId = 'fondue-tree-item',\n }: InternalTreeItemProps) => {\n const { active, over } = useDndContext();\n const { isSelected, isExpanded, projection } = useTreeItem(id);\n const expandDebounced = useRef<Nullable<string> | undefined>();\n\n const draggable = treeDraggable && itemDraggable;\n\n const isActive = active?.id === id;\n const activeProjection = isActive && projection !== null && projection !== undefined ? projection : null;\n\n const overAccepts =\n typeof over?.data?.current?.accepts === 'string' ? over.data.current.accepts?.split(', ') : [];\n\n const parentAccepts =\n typeof activeProjection?.accepts === 'string' ? activeProjection.accepts?.split(', ') : [];\n\n const currentType = active?.data.current?.type || '';\n\n const isWithin =\n projection?.previousNode?.depth !== undefined && projection?.depth > projection?.previousNode?.depth;\n const isWithinOneLevel = isWithin && projection.depth - 1 === projection?.previousNode?.depth;\n\n const canDropWithinAndDeeper =\n isWithin &&\n projection?.previousNode?.accepts !== undefined &&\n (projection?.previousNode?.accepts.includes(`${currentType}-deeper`) ||\n projection?.previousNode?.accepts.includes(`${currentType}-within`));\n\n const canDropWithin =\n (isActive &&\n isWithinOneLevel &&\n activeProjection?.previousNode?.accepts !== undefined &&\n activeProjection?.previousNode?.accepts.includes(`${currentType}-within`)) ||\n (activeProjection?.isWithinParent && parentAccepts.includes(`${currentType}-within`));\n\n const canDrop =\n isActive && active?.data.current && ((overAccepts.includes(currentType) && !isWithin) || canDropWithin);\n\n const expandProjectionParent = useDebounce((toExpandId: string) => {\n if (expandDebounced.current === toExpandId) {\n onExpand?.(toExpandId);\n }\n }, EXPAND_ONHOVER_DELAY);\n\n useEffect(() => {\n if (isActive) {\n expandDebounced.current = isWithin ? activeProjection?.previousNode?.id : null;\n }\n\n if (\n isActive &&\n canDropWithinAndDeeper &&\n activeProjection?.parentId &&\n activeProjection.previousNode &&\n activeProjection.parentId === activeProjection.previousNode.id &&\n activeProjection.parentId !== active?.data?.current?.parentId\n ) {\n expandProjectionParent(activeProjection?.parentId);\n }\n }, [\n active?.data,\n activeProjection?.parentId,\n activeProjection?.previousNode,\n expandProjectionParent,\n isActive,\n canDropWithinAndDeeper,\n isWithin,\n ]);\n\n const handleItemDragEnd = useCallback(\n (event: TreeDragEndEvent) => {\n const { over, active } = event;\n\n if (\n !isActive ||\n !activeProjection ||\n (active.id === over?.id && activeProjection?.depth === active.data.current?.level)\n ) {\n return;\n }\n\n if (isActive && over && canDrop && onDrop) {\n onDrop({\n id: active.id,\n parentId: activeProjection.parentId,\n sort: activeProjection.position,\n contentComponent,\n parentType: activeProjection.type,\n });\n }\n },\n [isActive, activeProjection, canDrop, onDrop, contentComponent],\n );\n\n const handleItemDragStart = useCallback(\n (event: TreeDragStartEvent) => {\n if (event.active.id !== id) {\n return;\n }\n\n registerOverlay?.({ contentComponent, children, id, label, level });\n },\n [children, contentComponent, id, label, level, registerOverlay],\n );\n\n const handleItemDragMove = useCallback(\n (event: TreeDragMoveEvent) => {\n if (event.active.id === id) {\n document.body.style.setProperty('cursor', canDrop ? 'grabbing' : 'no-drop');\n }\n },\n [canDrop, id],\n );\n\n useDndMonitor({\n onDragEnd: handleItemDragEnd,\n onDragStart: handleItemDragStart,\n onDragMove: handleItemDragMove,\n });\n\n const toggleExpand = useCallback(\n (event?: MouseEvent<HTMLButtonElement>) => {\n event?.stopPropagation();\n isExpanded ? onShrink?.(id) : onExpand?.(id);\n },\n [id, isExpanded, onExpand, onShrink],\n );\n\n const handleItemClick = useDebounce(\n (event: MouseEvent<HTMLElement>) => {\n event.stopPropagation();\n if (ignoreItemDoubleClick && event.detail >= 2) {\n return;\n }\n\n if (expandOnSelect) {\n toggleExpand();\n }\n\n onSelect?.(id);\n onClick?.(id);\n },\n ignoreItemDoubleClick ? 300 : 0,\n );\n\n const isParentActive = parentId && active?.id === parentId;\n\n const hasChildren = Children.count(children) > 0;\n\n const { enrichedChildren, childrenIds } = useMemo(() => {\n const enrichedChildren = removeFragmentsAndEnrichChildren(children, { parentId: id, level: level + 1 });\n return {\n enrichedChildren,\n childrenIds: enrichedChildren.map((child) => child.props.id),\n };\n }, [children, id, level]);\n\n const {\n attributes,\n listeners,\n transform,\n transition,\n setDraggableNodeRef,\n setDroppableNodeRef,\n setActivatorNodeRef,\n } = useSortable({\n id,\n disabled: !draggable,\n data: { type, accepts, parentId, level },\n animateLayoutChanges,\n transition: null,\n });\n\n useDeepCompareEffect(() => {\n if (Children.count(enrichedChildren) === 0) {\n unregisterNodeChildren?.(id);\n return;\n }\n\n if (isActive || isParentActive) {\n unregisterNodeChildren?.(id);\n return;\n }\n\n if (isExpanded) {\n registerNodeChildren?.({ id, children: enrichedChildren });\n } else {\n unregisterNodeChildren?.(id);\n }\n }, [isActive, isExpanded, isParentActive, enrichedChildren, id]);\n\n const { liClassName, backgroundClassName } = useMemo(() => {\n return {\n liClassName: merge([\n FOCUS_VISIBLE_STYLE,\n 'tw-relative tw-cursor-default tw-transition-colors tw-outline-none tw-ring-inset tw-group tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n !isActive && isSelected ? 'tw-font-medium tw-text-box-neutral-strong-inverse' : 'tw-text-text',\n ]),\n backgroundClassName: merge([\n 'tw-block tw-absolute tw-inset-0 tw-transition-colors -tw-z-10 -tw-mx-2.5',\n !isActive && !isSelected && 'group-active:tw-bg-box-neutral-pressed',\n !isActive && isSelected\n ? 'tw-bg-box-neutral-strong hover:tw-bg-box-neutral-strong-hover'\n : 'group-hover:tw-bg-box-neutral',\n ]),\n };\n }, [isActive, isSelected]);\n\n const showContent = !isActive;\n const showChildren = isExpanded && !isActive;\n const showDragHandle = draggable && !isActive;\n const showLabel = label !== undefined && !isActive;\n const showExpandButton = !isActive && (showCaret === undefined ? hasChildren : showCaret);\n\n let previousItemToBeExpandedFeedback = '';\n if (\n !isActive &&\n !isExpanded &&\n showExpandButton &&\n canDropWithinAndDeeper &&\n projection?.previousNode?.id === id &&\n projection?.depth > projection?.previousNode?.depth\n ) {\n previousItemToBeExpandedFeedback = 'tw-border-solid tw-rounded tw-border-2 tw-border-box-selected-strong';\n }\n\n const containerClassName = merge([\n 'tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-full',\n isActive ? 'tw-border-dashed tw-rounded-sm tw-border-2 tw-pr-0 tw-h-12' : 'tw-h-10',\n isActive &&\n (canDrop\n ? 'tw-border-box-selected-strong tw-bg-box-selected-hover'\n : 'tw-bg-box-negative-hover tw-border-box-negative-strong-hover'),\n previousItemToBeExpandedFeedback,\n ]);\n\n const depthPadding = activeProjection?.depth ? activeProjection.depth * INDENTATION_WIDTH : undefined;\n const levelPadding = isActive ? 0 : level * INDENTATION_WIDTH;\n\n const liStyle = {\n paddingLeft: depthPadding ?? levelPadding,\n };\n\n const backgroundStyle = {\n marginLeft: -1 * (depthPadding ?? levelPadding),\n };\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n };\n\n return (\n <li\n id={id}\n key={id}\n tabIndex={0}\n role=\"treeitem\"\n style={liStyle}\n onKeyDown={noop}\n aria-label={label}\n aria-level={level + 1}\n onClick={handleItemClick}\n className={liClassName}\n ref={setDroppableNodeRef}\n data-test-id={dataTestId}\n aria-selected={isSelected}\n aria-expanded={isExpanded}\n data-has-children={hasChildren}\n aria-owns={childrenIds.join(' ')}\n >\n <div ref={setDraggableNodeRef} className={containerClassName} style={style}>\n <span className={backgroundClassName} style={backgroundStyle} aria-hidden={true} />\n <DragHandle\n {...listeners}\n {...attributes}\n active={isSelected}\n ref={setActivatorNodeRef}\n disabled={!showDragHandle}\n aria-hidden={!showDragHandle}\n className={showDragHandle ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n />\n\n <ExpandButton\n active={transform?.y ? false : isSelected}\n onClick={toggleExpand}\n expanded={showChildren}\n disabled={!showExpandButton}\n aria-hidden={!showExpandButton}\n className={showExpandButton ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n />\n\n {showLabel && (\n <span className=\"first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center\">{label}</span>\n )}\n\n {showContent && contentComponent}\n </div>\n </li>\n );\n },\n);\n\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["animateLayoutChanges","isSorting","wasDragging","TreeItem","memo","id","type","label","onDrop","accepts","showCaret","children","parentId","level","contentComponent","treeDraggable","onClick","onSelect","onExpand","onShrink","registerOverlay","registerNodeChildren","unregisterNodeChildren","itemDraggable","ignoreItemDoubleClick","expandOnSelect","dataTestId","active","over","useDndContext","isSelected","isExpanded","projection","useTreeItem","expandDebounced","useRef","draggable","isActive","activeProjection","overAccepts","_b","_a","_c","parentAccepts","_d","currentType","_e","isWithin","_f","_g","isWithinOneLevel","_h","canDropWithinAndDeeper","_i","_j","_k","canDropWithin","_l","_m","canDrop","expandProjectionParent","useDebounce","toExpandId","EXPAND_ONHOVER_DELAY","useEffect","handleItemDragEnd","useCallback","event","handleItemDragStart","handleItemDragMove","useDndMonitor","toggleExpand","handleItemClick","isParentActive","hasChildren","Children","enrichedChildren","childrenIds","useMemo","removeFragmentsAndEnrichChildren","child","attributes","listeners","transform","transition","setDraggableNodeRef","setDroppableNodeRef","setActivatorNodeRef","useSortable","useDeepCompareEffect","liClassName","backgroundClassName","merge","FOCUS_VISIBLE_STYLE","showContent","showChildren","showDragHandle","showLabel","showExpandButton","previousItemToBeExpandedFeedback","_n","_o","containerClassName","depthPadding","INDENTATION_WIDTH","levelPadding","liStyle","backgroundStyle","style","CSS","React","noop","DragHandle","ExpandButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TreeItem.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, MouseEvent, memo, useCallback, useEffect, useMemo, useRef } from 'react';\nimport { AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { useDndContext, useDndMonitor } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport noop from 'lodash-es/noop';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport type {\n RegisterNodeChildrenPayload,\n TreeDragEndEvent,\n TreeDragMoveEvent,\n TreeDragStartEvent,\n TreeItemProps,\n} from '@components/Tree/types';\n\nimport { EXPAND_ONHOVER_DELAY, INDENTATION_WIDTH, Projection } from '../helpers';\nimport { removeFragmentsAndEnrichChildren, useDeepCompareEffect } from '../utils';\n\nimport { DragHandle } from './DragHandle';\nimport { Overlay } from './TreeItemOverlay';\nimport { ExpandButton } from './ExpandButton';\nimport { useDebounce } from '@hooks/useDebounce';\nimport { useTreeItem } from './useTreeItem';\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>\n isSorting || wasDragging ? false : true;\n\n/** @private */\ntype TreeItemPrivateProps = {\n level?: number;\n levelConstraint?: Nullable<number>;\n parentId?: string;\n isSelected?: boolean;\n isExpanded?: boolean;\n treeDraggable?: boolean;\n /** onSelect is passed by the Tree component when cloning the TreeItem */\n onSelect?: (id: string) => void;\n /** onClick is the user defined callback to run after the onSelect */\n onClick?: (id: string) => void;\n onExpand?: (id: string) => void;\n onShrink?: (id: string) => void;\n projection?: Nullable<Projection>;\n registerOverlay?: (overlay: Overlay) => void;\n unregisterNodeChildren?: (payload: string) => void;\n registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void;\n};\n\n/** @private */\nexport type InternalTreeItemProps = TreeItemProps & TreeItemPrivateProps;\n\nexport const TreeItem = memo(\n ({\n id,\n type,\n label,\n onDrop,\n accepts,\n showCaret,\n children,\n parentId,\n level = 0,\n contentComponent,\n treeDraggable = false,\n onClick,\n onSelect,\n onExpand,\n onShrink,\n registerOverlay,\n registerNodeChildren,\n unregisterNodeChildren,\n draggable: itemDraggable = true,\n ignoreItemDoubleClick = false,\n expandOnSelect = false,\n 'data-test-id': dataTestId = 'fondue-tree-item',\n }: InternalTreeItemProps) => {\n const { active, over } = useDndContext();\n const { isSelected, isExpanded, projection } = useTreeItem(id);\n const expandDebounced = useRef<Nullable<string> | undefined>();\n\n const draggable = treeDraggable && itemDraggable;\n\n const isActive = active?.id === id;\n const activeProjection = isActive && projection !== null && projection !== undefined ? projection : null;\n\n const overAccepts =\n typeof over?.data?.current?.accepts === 'string' ? over.data.current.accepts?.split(', ') : [];\n\n const parentAccepts =\n typeof activeProjection?.accepts === 'string' ? activeProjection.accepts?.split(', ') : [];\n\n const currentType = active?.data.current?.type || '';\n\n const isWithin =\n projection?.previousNode?.depth !== undefined && projection?.depth > projection?.previousNode?.depth;\n const isWithinOneLevel = isWithin && projection.depth - 1 === projection?.previousNode?.depth;\n\n const canDropWithinAndDeeper =\n isWithin &&\n projection?.previousNode?.accepts !== undefined &&\n (projection?.previousNode?.accepts.includes(`${currentType}-deeper`) ||\n projection?.previousNode?.accepts.includes(`${currentType}-within`));\n\n const canDropWithin =\n (isActive &&\n isWithinOneLevel &&\n activeProjection?.previousNode?.accepts !== undefined &&\n activeProjection?.previousNode?.accepts.includes(`${currentType}-within`)) ||\n (activeProjection?.isWithinParent && parentAccepts.includes(`${currentType}-within`));\n\n const canDrop =\n isActive && active?.data.current && ((overAccepts.includes(currentType) && !isWithin) || canDropWithin);\n\n const expandProjectionParent = useDebounce((toExpandId: string) => {\n if (expandDebounced.current === toExpandId) {\n onExpand?.(toExpandId);\n }\n }, EXPAND_ONHOVER_DELAY);\n\n useEffect(() => {\n if (isActive) {\n expandDebounced.current = isWithin ? activeProjection?.previousNode?.id : null;\n }\n\n if (\n isActive &&\n canDropWithinAndDeeper &&\n activeProjection?.parentId &&\n activeProjection.previousNode &&\n activeProjection.parentId === activeProjection.previousNode.id &&\n activeProjection.parentId !== active?.data?.current?.parentId\n ) {\n expandProjectionParent(activeProjection?.parentId);\n }\n }, [\n active?.data,\n activeProjection?.parentId,\n activeProjection?.previousNode,\n expandProjectionParent,\n isActive,\n canDropWithinAndDeeper,\n isWithin,\n ]);\n\n const handleItemDragEnd = useCallback(\n (event: TreeDragEndEvent) => {\n const { over, active } = event;\n\n if (\n !isActive ||\n !activeProjection ||\n (active.id === over?.id && activeProjection?.depth === active.data.current?.level)\n ) {\n return;\n }\n\n if (isActive && over && canDrop && onDrop) {\n onDrop({\n id: active.id,\n parentId: activeProjection.parentId,\n sort: activeProjection.position,\n contentComponent,\n parentType: activeProjection.type,\n });\n }\n },\n [isActive, activeProjection, canDrop, onDrop, contentComponent],\n );\n\n const handleItemDragStart = useCallback(\n (event: TreeDragStartEvent) => {\n if (event.active.id !== id) {\n return;\n }\n\n registerOverlay?.({ contentComponent, children, id, label, level });\n },\n [children, contentComponent, id, label, level, registerOverlay],\n );\n\n const handleItemDragMove = useCallback(\n (event: TreeDragMoveEvent) => {\n if (event.active.id === id) {\n document.body.style.setProperty('cursor', canDrop ? 'grabbing' : 'no-drop');\n }\n },\n [canDrop, id],\n );\n\n useDndMonitor({\n onDragEnd: handleItemDragEnd,\n onDragStart: handleItemDragStart,\n onDragMove: handleItemDragMove,\n });\n\n const toggleExpand = useCallback(\n (event?: MouseEvent<HTMLButtonElement>) => {\n event?.stopPropagation();\n isExpanded ? onShrink?.(id) : onExpand?.(id);\n },\n [id, isExpanded, onExpand, onShrink],\n );\n\n const handleItemClick = useDebounce(\n (event: MouseEvent<HTMLElement>) => {\n event.stopPropagation();\n if (ignoreItemDoubleClick && event.detail >= 2) {\n return;\n }\n\n if (expandOnSelect) {\n toggleExpand();\n }\n\n onSelect?.(id);\n onClick?.(id);\n },\n ignoreItemDoubleClick ? 300 : 0,\n );\n\n const isParentActive = parentId && active?.id === parentId;\n\n const hasChildren = Children.count(children) > 0;\n\n const { enrichedChildren, childrenIds } = useMemo(() => {\n const enrichedChildren = removeFragmentsAndEnrichChildren(children, { parentId: id, level: level + 1 });\n return {\n enrichedChildren,\n childrenIds: enrichedChildren.map((child) => child.props.id),\n };\n }, [children, id, level]);\n\n const {\n attributes,\n listeners,\n transform,\n transition,\n setDraggableNodeRef,\n setDroppableNodeRef,\n setActivatorNodeRef,\n } = useSortable({\n id,\n disabled: !draggable,\n data: { type, accepts, parentId, level },\n animateLayoutChanges,\n transition: null,\n });\n\n useDeepCompareEffect(() => {\n if (Children.count(enrichedChildren) === 0) {\n unregisterNodeChildren?.(id);\n return;\n }\n\n if (isActive || isParentActive) {\n unregisterNodeChildren?.(id);\n return;\n }\n\n if (isExpanded) {\n registerNodeChildren?.({ id, children: enrichedChildren });\n } else {\n unregisterNodeChildren?.(id);\n }\n }, [isActive, isExpanded, isParentActive, enrichedChildren, id]);\n\n const { liClassName, backgroundClassName } = useMemo(() => {\n return {\n liClassName: merge([\n FOCUS_VISIBLE_STYLE,\n 'tw-relative tw-cursor-default tw-transition-colors tw-outline-none tw-ring-inset tw-group tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n !isActive && isSelected ? 'tw-font-medium tw-text-box-neutral-strong-inverse' : 'tw-text-text',\n ]),\n backgroundClassName: merge([\n 'tw-block tw-absolute tw-inset-0 tw-transition-colors -tw-z-10 -tw-mx-2.5',\n !isActive && !isSelected && 'group-active:tw-bg-box-neutral-pressed',\n !isActive && isSelected\n ? 'tw-bg-box-neutral-strong hover:tw-bg-box-neutral-strong-hover'\n : 'group-hover:tw-bg-box-neutral',\n ]),\n };\n }, [isActive, isSelected]);\n\n const showContent = !isActive;\n const showChildren = isExpanded && !isActive;\n const showDragHandle = draggable && !isActive;\n const showLabel = label !== undefined && !isActive;\n const showExpandButton = !isActive && (showCaret === undefined ? hasChildren : showCaret);\n\n let previousItemToBeExpandedFeedback = '';\n if (\n !isActive &&\n !isExpanded &&\n showExpandButton &&\n canDropWithinAndDeeper &&\n projection?.previousNode?.id === id &&\n projection?.depth > projection?.previousNode?.depth\n ) {\n previousItemToBeExpandedFeedback = 'tw-border-solid tw-rounded tw-border-2 tw-border-box-selected-strong';\n }\n\n const containerClassName = merge([\n 'tw-relative tw-z-0 tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-full',\n isActive ? 'tw-border-dashed tw-rounded-sm tw-border-2 tw-pr-0 tw-h-12' : 'tw-h-10',\n isActive &&\n (canDrop\n ? 'tw-border-box-selected-strong tw-bg-box-selected-hover'\n : 'tw-bg-box-negative-hover tw-border-box-negative-strong-hover'),\n previousItemToBeExpandedFeedback,\n ]);\n\n const depthPadding = activeProjection?.depth ? activeProjection.depth * INDENTATION_WIDTH : undefined;\n const levelPadding = isActive ? 0 : level * INDENTATION_WIDTH;\n\n const liStyle = {\n paddingLeft: depthPadding ?? levelPadding,\n };\n\n const backgroundStyle = {\n marginLeft: -1 * (depthPadding ?? levelPadding),\n };\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n };\n\n return (\n <li\n id={id}\n key={id}\n tabIndex={0}\n role=\"treeitem\"\n style={liStyle}\n onKeyDown={noop}\n aria-label={label}\n aria-level={level + 1}\n onClick={handleItemClick}\n className={liClassName}\n ref={setDroppableNodeRef}\n data-test-id={dataTestId}\n aria-selected={isSelected}\n aria-expanded={isExpanded}\n data-has-children={hasChildren}\n aria-owns={childrenIds.join(' ')}\n >\n <div ref={setDraggableNodeRef} className={containerClassName} style={style}>\n <span className={backgroundClassName} style={backgroundStyle} aria-hidden={true} />\n <DragHandle\n {...listeners}\n {...attributes}\n active={isSelected}\n ref={setActivatorNodeRef}\n disabled={!showDragHandle}\n aria-hidden={!showDragHandle}\n className={showDragHandle ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n />\n\n <ExpandButton\n active={transform?.y ? false : isSelected}\n onClick={toggleExpand}\n expanded={showChildren}\n disabled={!showExpandButton}\n aria-hidden={!showExpandButton}\n className={showExpandButton ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n />\n\n {showLabel && (\n <span className=\"first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center\">{label}</span>\n )}\n\n {showContent && contentComponent}\n </div>\n </li>\n );\n },\n);\n\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["animateLayoutChanges","isSorting","wasDragging","TreeItem","memo","id","type","label","onDrop","accepts","showCaret","children","parentId","level","contentComponent","treeDraggable","onClick","onSelect","onExpand","onShrink","registerOverlay","registerNodeChildren","unregisterNodeChildren","itemDraggable","ignoreItemDoubleClick","expandOnSelect","dataTestId","active","over","useDndContext","isSelected","isExpanded","projection","useTreeItem","expandDebounced","useRef","draggable","isActive","activeProjection","overAccepts","_b","_a","_c","parentAccepts","_d","currentType","_e","isWithin","_f","_g","isWithinOneLevel","_h","canDropWithinAndDeeper","_i","_j","_k","canDropWithin","_l","_m","canDrop","expandProjectionParent","useDebounce","toExpandId","EXPAND_ONHOVER_DELAY","useEffect","handleItemDragEnd","useCallback","event","handleItemDragStart","handleItemDragMove","useDndMonitor","toggleExpand","handleItemClick","isParentActive","hasChildren","Children","enrichedChildren","childrenIds","useMemo","removeFragmentsAndEnrichChildren","child","attributes","listeners","transform","transition","setDraggableNodeRef","setDroppableNodeRef","setActivatorNodeRef","useSortable","useDeepCompareEffect","liClassName","backgroundClassName","merge","FOCUS_VISIBLE_STYLE","showContent","showChildren","showDragHandle","showLabel","showExpandButton","previousItemToBeExpandedFeedback","_n","_o","containerClassName","depthPadding","INDENTATION_WIDTH","levelPadding","liStyle","backgroundStyle","style","CSS","React","noop","DragHandle","ExpandButton"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ function n(t) {
|
|
|
16
16
|
{
|
|
17
17
|
fill: "currentColor",
|
|
18
18
|
fillRule: "evenodd",
|
|
19
|
-
d: "
|
|
19
|
+
d: "M13.329.767 13.073 0 12.5.572l-1.85 1.85-.189.188.053.263.073.366a5.754 5.754 0 1 0 2.174 2.172l.364.073.263.052.189-.189 1.85-1.849.571-.572-.767-.256-1.428-.475L13.33.767ZM11.853 4.21l1.207.241 1.088-1.088-.897-.299-.237-.079-.08-.237-.298-.897-1.088 1.088.241 1.207.064.064Zm.655 4.038a4.754 4.754 0 1 1-1.764-3.696l-.778.778a3.661 3.661 0 1 0 .707.707l.778-.778a4.733 4.733 0 0 1 1.057 2.989ZM7.754 5.587c.555 0 1.07.17 1.496.459l-.797.796a1.57 1.57 0 1 0 .707.707l.797-.796a2.661 2.661 0 1 1-2.202-1.166Zm0 3.23a.57.57 0 1 0 0-1.138.57.57 0 0 0 0 1.138Z",
|
|
20
20
|
clipRule: "evenodd"
|
|
21
21
|
}
|
|
22
22
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconTarget16.es.js","sources":["../../../../src/foundation/Icon/Generated/IconTarget16.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { GeneratedIconProps } from '@foundation/Icon/IconProps';\nfunction IconTarget16(props: GeneratedIconProps): React.ReactElement<GeneratedIconProps> {\n const customClassName = 'tw-flex tw-items-center tw-justify-center tw-fill-current';\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={16}\n height={16}\n className={customClassName}\n name=\"IconTarget16\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"
|
|
1
|
+
{"version":3,"file":"IconTarget16.es.js","sources":["../../../../src/foundation/Icon/Generated/IconTarget16.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { GeneratedIconProps } from '@foundation/Icon/IconProps';\nfunction IconTarget16(props: GeneratedIconProps): React.ReactElement<GeneratedIconProps> {\n const customClassName = 'tw-flex tw-items-center tw-justify-center tw-fill-current';\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={16}\n height={16}\n className={customClassName}\n name=\"IconTarget16\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"M13.329.767 13.073 0 12.5.572l-1.85 1.85-.189.188.053.263.073.366a5.754 5.754 0 1 0 2.174 2.172l.364.073.263.052.189-.189 1.85-1.849.571-.572-.767-.256-1.428-.475L13.33.767ZM11.853 4.21l1.207.241 1.088-1.088-.897-.299-.237-.079-.08-.237-.298-.897-1.088 1.088.241 1.207.064.064Zm.655 4.038a4.754 4.754 0 1 1-1.764-3.696l-.778.778a3.661 3.661 0 1 0 .707.707l.778-.778a4.733 4.733 0 0 1 1.057 2.989ZM7.754 5.587c.555 0 1.07.17 1.496.459l-.797.796a1.57 1.57 0 1 0 .707.707l.797-.796a2.661 2.661 0 1 1-2.202-1.166Zm0 3.23a.57.57 0 1 0 0-1.138.57.57 0 0 0 0 1.138Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n}\nexport default memo(IconTarget16);\n"],"names":["IconTarget16","props","customClassName","React","IconTarget16$1","memo"],"mappings":";AAEA,SAASA,EAAaC,GAAmE;AACrF,QAAMC,IAAkB;AAEpB,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAWD;AAAA,MACX,MAAK;AAAA,MACJ,GAAGD;AAAA,IAAA;AAAA,IAEJ,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAS;AAAA,QACT,GAAE;AAAA,QACF,UAAS;AAAA,MAAA;AAAA,IACb;AAAA,EAAA;AAGZ;AACA,MAAeC,IAAAC,EAAKL,CAAY;"}
|
|
@@ -11,15 +11,15 @@ function n(t) {
|
|
|
11
11
|
name: "IconTarget20",
|
|
12
12
|
...t
|
|
13
13
|
},
|
|
14
|
-
/* @__PURE__ */ e.createElement(
|
|
14
|
+
/* @__PURE__ */ e.createElement("g", { fill: "none" }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#Target20)" }, /* @__PURE__ */ e.createElement(
|
|
15
15
|
"path",
|
|
16
16
|
{
|
|
17
17
|
fill: "currentColor",
|
|
18
18
|
fillRule: "evenodd",
|
|
19
|
-
d: "
|
|
19
|
+
d: "M16.504 1.151 16.12 0l-.858.858-2.35 2.35-.284.283.079.394.074.37a7.311 7.311 0 1 0-3.47 13.747A7.311 7.311 0 0 0 15.748 7.22l.368.074.394.079.284-.284 2.35-2.35L20 3.88l-1.152-.384-1.759-.586-.586-1.759Zm-2.248 2.833 1.208-1.207.322.963.118.356.356.118.964.322-1.208 1.208-1.466-.294-.294-1.466Zm.867 6.709a5.811 5.811 0 0 1-5.811 5.81 5.811 5.811 0 1 1 3.544-10.415l-.828.827a4.652 4.652 0 1 0 1.06 1.06l.83-.827a5.784 5.784 0 0 1 1.205 3.545ZM9.312 7.54c.598 0 1.158.167 1.635.457l-.859.859a1.994 1.994 0 1 0 1.06 1.06l.86-.859A3.153 3.153 0 1 1 9.312 7.54Zm0 3.646a.494.494 0 1 0 0-.988.494.494 0 0 0 0 .988Z",
|
|
20
20
|
clipRule: "evenodd"
|
|
21
21
|
}
|
|
22
|
-
)
|
|
22
|
+
)), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "Target20" }, /* @__PURE__ */ e.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))))
|
|
23
23
|
);
|
|
24
24
|
}
|
|
25
25
|
const c = a(n);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconTarget20.es.js","sources":["../../../../src/foundation/Icon/Generated/IconTarget20.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { GeneratedIconProps } from '@foundation/Icon/IconProps';\nfunction IconTarget20(props: GeneratedIconProps): React.ReactElement<GeneratedIconProps> {\n const customClassName = 'tw-flex tw-items-center tw-justify-center tw-fill-current';\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={20}\n height={20}\n className={customClassName}\n name=\"IconTarget20\"\n {...props}\n >\n <path\n
|
|
1
|
+
{"version":3,"file":"IconTarget20.es.js","sources":["../../../../src/foundation/Icon/Generated/IconTarget20.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { GeneratedIconProps } from '@foundation/Icon/IconProps';\nfunction IconTarget20(props: GeneratedIconProps): React.ReactElement<GeneratedIconProps> {\n const customClassName = 'tw-flex tw-items-center tw-justify-center tw-fill-current';\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={20}\n height={20}\n className={customClassName}\n name=\"IconTarget20\"\n {...props}\n >\n <g fill=\"none\">\n <g clipPath=\"url(#Target20)\">\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"M16.504 1.151 16.12 0l-.858.858-2.35 2.35-.284.283.079.394.074.37a7.311 7.311 0 1 0-3.47 13.747A7.311 7.311 0 0 0 15.748 7.22l.368.074.394.079.284-.284 2.35-2.35L20 3.88l-1.152-.384-1.759-.586-.586-1.759Zm-2.248 2.833 1.208-1.207.322.963.118.356.356.118.964.322-1.208 1.208-1.466-.294-.294-1.466Zm.867 6.709a5.811 5.811 0 0 1-5.811 5.81 5.811 5.811 0 1 1 3.544-10.415l-.828.827a4.652 4.652 0 1 0 1.06 1.06l.83-.827a5.784 5.784 0 0 1 1.205 3.545ZM9.312 7.54c.598 0 1.158.167 1.635.457l-.859.859a1.994 1.994 0 1 0 1.06 1.06l.86-.859A3.153 3.153 0 1 1 9.312 7.54Zm0 3.646a.494.494 0 1 0 0-.988.494.494 0 0 0 0 .988Z\"\n clipRule=\"evenodd\"\n />\n </g>\n <defs>\n <clipPath id=\"Target20\">\n <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\n </clipPath>\n </defs>\n </g>\n </svg>\n );\n}\nexport default memo(IconTarget20);\n"],"names":["IconTarget20","props","customClassName","React","IconTarget20$1","memo"],"mappings":";AAEA,SAASA,EAAaC,GAAmE;AACrF,QAAMC,IAAkB;AAEpB,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAWD;AAAA,MACX,MAAK;AAAA,MACJ,GAAGD;AAAA,IAAA;AAAA,oCAEH,KAAE,EAAA,MAAK,UACH,gBAAAE,EAAA,cAAA,KAAA,EAAE,UAAS,iBACR,GAAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAS;AAAA,QACT,GAAE;AAAA,QACF,UAAS;AAAA,MAAA;AAAA,IAAA,CAEjB,GACA,gBAAAA,EAAA,cAAC,QACG,MAAA,gBAAAA,EAAA,cAAC,cAAS,IAAG,WAAA,GACR,gBAAAA,EAAA,cAAA,QAAA,EAAK,MAAK,QAAO,GAAE,iBAAgB,CACxC,CACJ,CACJ;AAAA,EAAA;AAGZ;AACA,MAAeC,IAAAC,EAAKL,CAAY;"}
|
|
@@ -16,7 +16,7 @@ function n(t) {
|
|
|
16
16
|
{
|
|
17
17
|
fill: "currentColor",
|
|
18
18
|
fillRule: "evenodd",
|
|
19
|
-
d: "
|
|
19
|
+
d: "M19.96 1.351 19.576.2l-.858.858-2.632 2.632-.284.284.079.393.098.49a8.154 8.154 0 0 0-3.99-1.036 8.189 8.189 0 1 0 0 16.377 8.189 8.189 0 0 0 7.152-12.182l.487.098.393.078.284-.284 2.632-2.631.858-.858-1.15-.384-2.014-.671-.671-2.013Zm-2.53 3.116 1.49-1.49.406 1.217.119.356.356.118 1.217.406-1.49 1.49-1.748-.35-.35-1.747Zm1.249 7.543a6.689 6.689 0 0 1-6.69 6.688A6.689 6.689 0 1 1 16.16 6.78l-1.053 1.053a5.211 5.211 0 1 0 1.06 1.06L17.22 7.84a6.66 6.66 0 0 1 1.459 4.17Zm-6.69-3.711a3.69 3.69 0 0 1 2.04.61l-1.082 1.082a2.233 2.233 0 1 0 1.06 1.06L15.09 9.97a3.711 3.711 0 1 1-3.1-1.67Zm0 4.444a.733.733 0 1 0 0-1.467.733.733 0 0 0 0 1.467Z",
|
|
20
20
|
clipRule: "evenodd"
|
|
21
21
|
}
|
|
22
22
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconTarget24.es.js","sources":["../../../../src/foundation/Icon/Generated/IconTarget24.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { GeneratedIconProps } from '@foundation/Icon/IconProps';\nfunction IconTarget24(props: GeneratedIconProps): React.ReactElement<GeneratedIconProps> {\n const customClassName = 'tw-flex tw-items-center tw-justify-center tw-fill-current';\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={24}\n height={24}\n className={customClassName}\n name=\"IconTarget24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"
|
|
1
|
+
{"version":3,"file":"IconTarget24.es.js","sources":["../../../../src/foundation/Icon/Generated/IconTarget24.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { GeneratedIconProps } from '@foundation/Icon/IconProps';\nfunction IconTarget24(props: GeneratedIconProps): React.ReactElement<GeneratedIconProps> {\n const customClassName = 'tw-flex tw-items-center tw-justify-center tw-fill-current';\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={24}\n height={24}\n className={customClassName}\n name=\"IconTarget24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"M19.96 1.351 19.576.2l-.858.858-2.632 2.632-.284.284.079.393.098.49a8.154 8.154 0 0 0-3.99-1.036 8.189 8.189 0 1 0 0 16.377 8.189 8.189 0 0 0 7.152-12.182l.487.098.393.078.284-.284 2.632-2.631.858-.858-1.15-.384-2.014-.671-.671-2.013Zm-2.53 3.116 1.49-1.49.406 1.217.119.356.356.118 1.217.406-1.49 1.49-1.748-.35-.35-1.747Zm1.249 7.543a6.689 6.689 0 0 1-6.69 6.688A6.689 6.689 0 1 1 16.16 6.78l-1.053 1.053a5.211 5.211 0 1 0 1.06 1.06L17.22 7.84a6.66 6.66 0 0 1 1.459 4.17Zm-6.69-3.711a3.69 3.69 0 0 1 2.04.61l-1.082 1.082a2.233 2.233 0 1 0 1.06 1.06L15.09 9.97a3.711 3.711 0 1 1-3.1-1.67Zm0 4.444a.733.733 0 1 0 0-1.467.733.733 0 0 0 0 1.467Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n}\nexport default memo(IconTarget24);\n"],"names":["IconTarget24","props","customClassName","React","IconTarget24$1","memo"],"mappings":";AAEA,SAASA,EAAaC,GAAmE;AACrF,QAAMC,IAAkB;AAEpB,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAWD;AAAA,MACX,MAAK;AAAA,MACJ,GAAGD;AAAA,IAAA;AAAA,IAEJ,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAS;AAAA,QACT,GAAE;AAAA,QACF,UAAS;AAAA,MAAA;AAAA,IACb;AAAA,EAAA;AAGZ;AACA,MAAeC,IAAAC,EAAKL,CAAY;"}
|
|
@@ -16,7 +16,7 @@ function c(t) {
|
|
|
16
16
|
{
|
|
17
17
|
fill: "currentColor",
|
|
18
18
|
fillRule: "evenodd",
|
|
19
|
-
d: "
|
|
19
|
+
d: "M26.699 1.684 26.187.149l-1.144 1.144-3.536 3.535-.378.379.105.525.133.664A10.95 10.95 0 0 0 16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11a10.95 10.95 0 0 0-1.4-5.373l.661.132.525.105.378-.379L30.7 6.95l1.144-1.144-1.535-.512L27.6 4.39l-.9-2.706Zm-2.92 6.539 2.35.47L28.14 6.68l-1.647-.55-.474-.158-.158-.474-.549-1.647L23.3 5.864l.47 2.35.01.009ZM25 16a9 9 0 1 1-9-9c2.125 0 4.078.736 5.618 1.968l-1.426 1.425a7 7 0 1 0 1.414 1.414l1.426-1.425A8.962 8.962 0 0 1 25 16Zm-9-5c1.02 0 1.967.305 2.757.828l-1.464 1.464a3 3 0 1 0 1.414 1.414l1.465-1.463A5 5 0 1 1 16 11Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
|
|
20
20
|
clipRule: "evenodd"
|
|
21
21
|
}
|
|
22
22
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconTarget32.es.js","sources":["../../../../src/foundation/Icon/Generated/IconTarget32.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { GeneratedIconProps } from '@foundation/Icon/IconProps';\nfunction IconTarget32(props: GeneratedIconProps): React.ReactElement<GeneratedIconProps> {\n const customClassName = 'tw-flex tw-items-center tw-justify-center tw-fill-current';\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={32}\n height={32}\n className={customClassName}\n name=\"IconTarget32\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"
|
|
1
|
+
{"version":3,"file":"IconTarget32.es.js","sources":["../../../../src/foundation/Icon/Generated/IconTarget32.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { GeneratedIconProps } from '@foundation/Icon/IconProps';\nfunction IconTarget32(props: GeneratedIconProps): React.ReactElement<GeneratedIconProps> {\n const customClassName = 'tw-flex tw-items-center tw-justify-center tw-fill-current';\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={32}\n height={32}\n className={customClassName}\n name=\"IconTarget32\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"M26.699 1.684 26.187.149l-1.144 1.144-3.536 3.535-.378.379.105.525.133.664A10.95 10.95 0 0 0 16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11a10.95 10.95 0 0 0-1.4-5.373l.661.132.525.105.378-.379L30.7 6.95l1.144-1.144-1.535-.512L27.6 4.39l-.9-2.706Zm-2.92 6.539 2.35.47L28.14 6.68l-1.647-.55-.474-.158-.158-.474-.549-1.647L23.3 5.864l.47 2.35.01.009ZM25 16a9 9 0 1 1-9-9c2.125 0 4.078.736 5.618 1.968l-1.426 1.425a7 7 0 1 0 1.414 1.414l1.426-1.425A8.962 8.962 0 0 1 25 16Zm-9-5c1.02 0 1.967.305 2.757.828l-1.464 1.464a3 3 0 1 0 1.414 1.414l1.465-1.463A5 5 0 1 1 16 11Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n}\nexport default memo(IconTarget32);\n"],"names":["IconTarget32","props","customClassName","React","IconTarget32$1","memo"],"mappings":";AAEA,SAASA,EAAaC,GAAmE;AACrF,QAAMC,IAAkB;AAEpB,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,OAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAWD;AAAA,MACX,MAAK;AAAA,MACJ,GAAGD;AAAA,IAAA;AAAA,IAEJ,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAS;AAAA,QACT,GAAE;AAAA,QACF,UAAS;AAAA,MAAA;AAAA,IACb;AAAA,EAAA;AAGZ;AACA,MAAeC,IAAAC,EAAKL,CAAY;"}
|