npm - @frontify/fondue - Versions diffs - 12.0.0-beta.6 → 12.0.0-beta.8 - Mend

@frontify/fondue 12.0.0-beta.6 → 12.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (601) hide show

package/dist/components/TextInput/TextInput.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport { IconCheckMark, IconClipboard, IconCross, IconCrossCircle, IconEye, IconEyeOff } from '@foundation/Icon';\n\nexport enum TextInputType {\n Text = 'text',\n Password = 'password',\n Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n id?: string;\n type?: TextInputType;\n decorator?: ReactNode;\n dotted?: boolean;\n clearable?: boolean;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n autocomplete?: boolean;\n readonly?: boolean;\n validation?: Validation;\n copyable?: boolean;\n value?: string;\n onChange?: (value: string) => void;\n onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n size?: number;\n spellcheck?: boolean;\n focusOnMount?: boolean;\n};\n\nexport type TextInputProps =\n \| ({\n type?: TextInputType.Text;\n obfuscated?: false;\n } & TextInputBaseProps)\n \| ({\n type?: TextInputType.Number;\n obfuscated?: false;\n min?: number;\n max?: number;\n } & TextInputBaseProps)\n \| ({\n type: TextInputType.Password;\n obfuscated?: boolean;\n } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n id: propId,\n type = TextInputType.Text,\n decorator,\n validation = Validation.Default,\n clearable = false,\n placeholder,\n required,\n obfuscated,\n disabled = false,\n autocomplete = false,\n dotted = false,\n value = '',\n copyable = false,\n onChange,\n onEnterPressed,\n onBlur,\n onClear,\n size,\n spellcheck,\n readonly,\n focusOnMount,\n}) => {\n const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n const { copy, status } = useCopy();\n\n const inputElement = useRef<HTMLInputElement \| null>(null);\n const [isObfuscated, setIsObfuscated] = useState(\n typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n );\n\n useEffect(() => {\n setTimeout(() => {\n focusOnMount && inputElement.current?.focus();\n }, 0);\n }, [focusOnMount]);\n\n useEffect(() => {\n if (typeof obfuscated === 'boolean') {\n setIsObfuscated(obfuscated);\n }\n }, [obfuscated]);\n\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n onEnterPressed && onEnterPressed(event);\n }\n };\n\n const getInputType = () => {\n if (type === TextInputType.Password) {\n return isObfuscated ? TextInputType.Password : TextInputType.Text;\n }\n return type;\n };\n\n const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n return (\n <div\n {...focusProps}\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n dotted ? 'tw-border-dashed' : 'tw-border-solid',\n disabled \|\| readonly\n ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n : merge([\n 'focus-within:tw-border-black-90 hover:tw-border-black-90',\n validationClassMap[validation],\n isFocusVisible && FOCUS_STYLE,\n ]),\n ])}\n >\n {decorator && (\n <div\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-pl-1',\n disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n ])}\n data-test-id=\"decorator\"\n >\n {decorator}\n </div>\n )}\n <input\n id={useMemoizedId(propId)}\n ref={inputElement}\n className={merge([\n 'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n disabled \|\| readonly\n ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n ])}\n onClick={() => inputElement.current?.focus()}\n onChange={(event) => onChange && onChange(event.currentTarget.value)}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n value={value}\n type={getInputType()}\n required={required}\n readOnly={readonly}\n disabled={disabled}\n autoComplete={autocomplete ? 'on' : 'off'}\n size={size}\n data-test-id=\"text-input\"\n {...spellcheckProp}\n />\n {`${value}`.length > 0 && clearable && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n clearButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => {\n inputElement.current?.focus();\n inputElement.current?.setAttribute('value', '');\n\n onChange && onChange('');\n onClear && onClear();\n }}\n data-test-id=\"clear-icon\"\n title=\"Clear text input\"\n aria-label=\"clear text input\"\n disabled={disabled}\n type=\"button\"\n {...clearButtonFocusProps}\n >\n <IconCross />\n </button>\n )}\n {type === TextInputType.Password && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n passwordButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => setIsObfuscated(!isObfuscated)}\n data-test-id=\"visibility-icon\"\n title=\"Toggle text visibility\"\n type=\"button\"\n aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n disabled={disabled}\n {...passwordButtonFocusProps}\n >\n {isObfuscated ? <IconEye /> : <IconEyeOff />}\n </button>\n )}\n {validation === Validation.Loading && (\n <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n {copyable && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n copyButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => copy(value)}\n data-test-id=\"copy-icon\"\n title=\"Copy input text\"\n disabled={disabled}\n type=\"button\"\n {...copyButtonFocusProps}\n >\n {status === 'error' && (\n <span className=\"tw-text-box-negative-strong\">\n <IconCrossCircle />\n </span>\n )}\n {status === 'idle' && <IconClipboard />}\n {status === 'success' && (\n <span className=\"tw-text-box-positive-strong\">\n <IconCheckMark />\n </span>\n )}\n </button>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
1	+ {"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport { IconCheckMark, IconClipboard, IconCross, IconCrossCircle, IconEye, IconEyeOff } from '@foundation/Icon';\n\nexport enum TextInputType {\n Text = 'text',\n Password = 'password',\n Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n id?: string;\n type?: TextInputType;\n decorator?: ReactNode;\n dotted?: boolean;\n clearable?: boolean;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n autocomplete?: boolean;\n readonly?: boolean;\n validation?: Validation;\n copyable?: boolean;\n value?: string;\n onChange?: (value: string) => void;\n onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n size?: number;\n spellcheck?: boolean;\n focusOnMount?: boolean;\n};\n\nexport type TextInputProps =\n \| ({\n type?: TextInputType.Text;\n obfuscated?: false;\n } & TextInputBaseProps)\n \| ({\n type?: TextInputType.Number;\n obfuscated?: false;\n min?: number;\n max?: number;\n } & TextInputBaseProps)\n \| ({\n type: TextInputType.Password;\n obfuscated?: boolean;\n } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n id: propId,\n type = TextInputType.Text,\n decorator,\n validation = Validation.Default,\n clearable = false,\n placeholder,\n required,\n obfuscated,\n disabled = false,\n autocomplete = false,\n dotted = false,\n value = '',\n copyable = false,\n onChange,\n onEnterPressed,\n onBlur,\n onClear,\n size,\n spellcheck,\n readonly,\n focusOnMount,\n}) => {\n const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n const { copy, status } = useCopy();\n\n const inputElement = useRef<HTMLInputElement \| null>(null);\n const [isObfuscated, setIsObfuscated] = useState(\n typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n );\n\n useEffect(() => {\n setTimeout(() => {\n focusOnMount && inputElement.current?.focus();\n }, 0);\n }, [focusOnMount]);\n\n useEffect(() => {\n if (typeof obfuscated === 'boolean') {\n setIsObfuscated(obfuscated);\n }\n }, [obfuscated]);\n\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n onEnterPressed && onEnterPressed(event);\n }\n };\n\n const getInputType = () => {\n if (type === TextInputType.Password) {\n return isObfuscated ? TextInputType.Password : TextInputType.Text;\n }\n return type;\n };\n\n const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n return (\n <div\n {...focusProps}\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n dotted ? 'tw-border-dashed' : 'tw-border-solid',\n disabled \|\| readonly\n ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n : merge([\n 'focus-within:tw-border-black-90 hover:tw-border-black-90',\n validationClassMap[validation],\n isFocusVisible && FOCUS_STYLE,\n ]),\n ])}\n >\n {decorator && (\n <div\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-pl-1',\n disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n ])}\n data-test-id=\"decorator\"\n >\n {decorator}\n </div>\n )}\n <input\n id={useMemoizedId(propId)}\n ref={inputElement}\n className={merge([\n 'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n disabled \|\| readonly\n ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n ])}\n onClick={() => inputElement.current?.focus()}\n onChange={(event) => onChange && onChange(event.currentTarget.value)}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n value={value}\n type={getInputType()}\n required={required}\n readOnly={readonly}\n disabled={disabled}\n autoComplete={autocomplete ? 'on' : 'off'}\n size={size}\n data-test-id=\"text-input\"\n {...spellcheckProp}\n />\n {`${value}`.length > 0 && clearable && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n clearButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => {\n inputElement.current?.focus();\n inputElement.current?.setAttribute('value', '');\n\n onChange && onChange('');\n onClear && onClear();\n }}\n data-test-id=\"clear-icon\"\n title=\"Clear text input\"\n aria-label=\"clear text input\"\n disabled={disabled}\n type=\"button\"\n {...clearButtonFocusProps}\n >\n <IconCross />\n </button>\n )}\n {type === TextInputType.Password && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n passwordButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => setIsObfuscated(!isObfuscated)}\n data-test-id=\"visibility-icon\"\n title=\"Toggle text visibility\"\n type=\"button\"\n aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n disabled={disabled}\n {...passwordButtonFocusProps}\n >\n {isObfuscated ? <IconEye /> : <IconEyeOff />}\n </button>\n )}\n {validation === Validation.Loading && (\n <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n {copyable && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n copyButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => copy(value)}\n data-test-id=\"copy-icon\"\n title=\"Copy input text\"\n disabled={disabled}\n type=\"button\"\n {...copyButtonFocusProps}\n >\n {status === 'error' && (\n <span className=\"tw-text-box-negative-strong\">\n <IconCrossCircle />\n </span>\n )}\n {status === 'idle' && <IconClipboard />}\n {status === 'success' && (\n <span className=\"tw-text-box-positive-strong\">\n <IconCheckMark />\n </span>\n )}\n </button>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/Tooltip/BrightHeader.es.js CHANGED Viewed

@@ -1337,6 +1337,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1644,7 +1656,7 @@ const l = {
   Warning: "tw-bg-red-60",
   Tip: "tw-bg-green-60",
   Note: "tw-bg-yellow-60"
-}, qz = {
+}, Xz = {
   Information: "before:tw-bg-violet-60",
   Warning: "before:tw-bg-red-60",
   Tip: "before:tw-bg-green-60",
@@ -1654,7 +1666,7 @@ const l = {
   Warning: /* @__PURE__ */ r.createElement(n, null),
   Tip: /* @__PURE__ */ r.createElement(m, null),
   Note: /* @__PURE__ */ r.createElement(p, null)
-}, Bz = ({ headerStyle: t }) => /* @__PURE__ */ r.createElement("div", {
+}, Yz = ({ headerStyle: t }) => /* @__PURE__ */ r.createElement("div", {
   "data-test-id": "bright-header",
   className: i([
     "tw-h-9 tw-relative tw-z-10 tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-text-white",
@@ -1662,9 +1674,9 @@ const l = {
   ])
 }, o(g[t], { size: a.Size20 }));
 export {
-  Bz as BrightHeader,
+  Yz as BrightHeader,
   c as BrightHeaderStyle,
-  qz as brightHeaderArrowBackgroundColors,
+  Xz as brightHeaderArrowBackgroundColors,
   l as brightHeaderBackgroundColors
 };
 //# sourceMappingURL=BrightHeader.es.js.map

package/dist/components/Tooltip/BrightHeader.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/Tooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n IconCheckMark,\n IconDocument,\n IconExclamationMarkCircle,\n IconExclamationMarkTriangle,\n IconSize,\n} from '@foundation/Icon';\n\nexport enum BrightHeaderStyle {\n Information = 'Information',\n Warning = 'Warning',\n Tip = 'Tip',\n Note = 'Note',\n}\n\nexport const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'tw-bg-violet-60',\n [BrightHeaderStyle.Warning]: 'tw-bg-red-60',\n [BrightHeaderStyle.Tip]: 'tw-bg-green-60',\n [BrightHeaderStyle.Note]: 'tw-bg-yellow-60',\n};\n\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'before:tw-bg-violet-60',\n [BrightHeaderStyle.Warning]: 'before:tw-bg-red-60',\n [BrightHeaderStyle.Tip]: 'before:tw-bg-green-60',\n [BrightHeaderStyle.Note]: 'before:tw-bg-yellow-60',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n [BrightHeaderStyle.Tip]: <IconCheckMark />,\n [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n headerStyle: BrightHeaderStyle;\n};\n\nexport const BrightHeader: FC<BrightHeaderProps> = ({ headerStyle }) => {\n return (\n <div\n data-test-id=\"bright-header\"\n className={merge([\n 'tw-h-9 tw-relative tw-z-10 tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-text-white',\n brightHeaderBackgroundColors[headerStyle],\n ])}\n >\n {cloneElement(brightHeaderIcon[headerStyle], { size: IconSize.Size20 })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYY,IAAA,sBAAA,MACM,GAAA,cAAA,eACJ,EAAA,UAAA,WACJ,EAAA,MAAA,OACC,EAAA,OAAA,QAJC,IAAA,KAAA,CAAA,CAAA;AAOL,MAAM,IAAkE;AAAA,EAC3E,AAAC,aAAgC;AAAA,EACjC,AAAC,SAA4B;AAAA,EAC7B,AAAC,KAAwB;AAAA,EACzB,AAAC,MAAyB;AAC9B,GAEa,KAAuE;AAAA,EAChF,AAAC,aAAgC;AAAA,EACjC,AAAC,SAA4B;AAAA,EAC7B,AAAC,KAAwB;AAAA,EACzB,AAAC,MAAyB;AAC9B,GAEM,IAA4D;AAAA,EAC9D,AAAC,aAAgC,kBAAA,cAAC,GAA0B,IAAA;AAAA,EAC5D,AAAC,SAA4B,kBAAA,cAAC,GAA4B,IAAA;AAAA,EAC1D,AAAC,KAAwB,kBAAA,cAAC,GAAc,IAAA;AAAA,EACxC,AAAC,MAAyB,kBAAA,cAAC,GAAa,IAAA;AAC5C,GAMa,KAAsC,CAAC,EAAE,qBAE7C,kBAAA,cAAA,OAAA;AAAA,EACG,gBAAa;AAAA,EACb,WAAW,EAAM;AAAA,IACb;AAAA,IACA,EAA6B;AAAA,EAAA,CAChC;AAAA,GAEA,EAAa,EAAiB,IAAc,EAAE,MAAM,EAAS,OAAQ,CAAA,CAC1E;"}
1	+ {"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/Tooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n IconCheckMark,\n IconDocument,\n IconExclamationMarkCircle,\n IconExclamationMarkTriangle,\n IconSize,\n} from '@foundation/Icon';\n\nexport enum BrightHeaderStyle {\n Information = 'Information',\n Warning = 'Warning',\n Tip = 'Tip',\n Note = 'Note',\n}\n\nexport const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'tw-bg-violet-60',\n [BrightHeaderStyle.Warning]: 'tw-bg-red-60',\n [BrightHeaderStyle.Tip]: 'tw-bg-green-60',\n [BrightHeaderStyle.Note]: 'tw-bg-yellow-60',\n};\n\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'before:tw-bg-violet-60',\n [BrightHeaderStyle.Warning]: 'before:tw-bg-red-60',\n [BrightHeaderStyle.Tip]: 'before:tw-bg-green-60',\n [BrightHeaderStyle.Note]: 'before:tw-bg-yellow-60',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n [BrightHeaderStyle.Tip]: <IconCheckMark />,\n [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n headerStyle: BrightHeaderStyle;\n};\n\nexport const BrightHeader: FC<BrightHeaderProps> = ({ headerStyle }) => {\n return (\n <div\n data-test-id=\"bright-header\"\n className={merge([\n 'tw-h-9 tw-relative tw-z-10 tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-text-white',\n brightHeaderBackgroundColors[headerStyle],\n ])}\n >\n {cloneElement(brightHeaderIcon[headerStyle], { size: IconSize.Size20 })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYY,IAAA,sBAAA,MACM,GAAA,cAAA,eACJ,EAAA,UAAA,WACJ,EAAA,MAAA,OACC,EAAA,OAAA,QAJC,IAAA,KAAA,CAAA,CAAA;AAOL,MAAM,IAAkE;AAAA,EAC3E,AAAC,aAAgC;AAAA,EACjC,AAAC,SAA4B;AAAA,EAC7B,AAAC,KAAwB;AAAA,EACzB,AAAC,MAAyB;AAC9B,GAEa,KAAuE;AAAA,EAChF,AAAC,aAAgC;AAAA,EACjC,AAAC,SAA4B;AAAA,EAC7B,AAAC,KAAwB;AAAA,EACzB,AAAC,MAAyB;AAC9B,GAEM,IAA4D;AAAA,EAC9D,AAAC,aAAgC,kBAAA,cAAC,GAA0B,IAAA;AAAA,EAC5D,AAAC,SAA4B,kBAAA,cAAC,GAA4B,IAAA;AAAA,EAC1D,AAAC,KAAwB,kBAAA,cAAC,GAAc,IAAA;AAAA,EACxC,AAAC,MAAyB,kBAAA,cAAC,GAAa,IAAA;AAC5C,GAMa,KAAsC,CAAC,EAAE,qBAE7C,kBAAA,cAAA,OAAA;AAAA,EACG,gBAAa;AAAA,EACb,WAAW,EAAM;AAAA,IACb;AAAA,IACA,EAA6B;AAAA,EAAA,CAChC;AAAA,GAEA,EAAa,EAAiB,IAAc,EAAE,MAAM,EAAS,OAAQ,CAAA,CAC1E;"}

package/dist/components/TooltipIcon/TooltipIcon.es.js CHANGED Viewed

@@ -1340,6 +1340,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1645,7 +1657,7 @@ const g = {
   Danger: "tw-text-box-negative-strong hover:tw-text-box-negative-strong-hover",
   Warning: "tw-text-box-warning-strong hover:tw-text-box-warning-strong-hover",
   Primary: "tw-text-text-weak hover:tw-text-text-x-weak"
-}, NI = ({
+}, TI = ({
   tooltip: t,
   iconSize: o = e.Size16,
   triggerIcon: i = /* @__PURE__ */ r.createElement(w, null),
@@ -1666,7 +1678,7 @@ const g = {
   ...t
 })));
 export {
-  NI as TooltipIcon,
+  TI as TooltipIcon,
   c as TooltipIconTriggerStyle
 };
 //# sourceMappingURL=TooltipIcon.es.js.map

package/dist/components/TooltipIcon/TooltipIcon.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipIcon.es.js","sources":["../../../src/components/TooltipIcon/TooltipIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, cloneElement } from 'react';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { Tooltip, TooltipProps } from '@components/Tooltip/Tooltip';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { IconProps, IconQuestionMarkCircle } from '@foundation/Icon';\n\nexport type TooltipIconProps = {\n tooltip?: TooltipProps;\n iconSize?: IconSize;\n triggerIcon?: ReactElement<IconProps>;\n triggerStyle?: TooltipIconTriggerStyle;\n};\n\nexport enum TooltipIconTriggerStyle {\n Danger = 'Danger',\n Warning = 'Warning',\n Primary = 'Primary',\n}\n\nconst tooltipTriggerStyleClass: Record<TooltipIconTriggerStyle, string> = {\n [TooltipIconTriggerStyle.Danger]: 'tw-text-box-negative-strong hover:tw-text-box-negative-strong-hover',\n [TooltipIconTriggerStyle.Warning]: 'tw-text-box-warning-strong hover:tw-text-box-warning-strong-hover',\n [TooltipIconTriggerStyle.Primary]: 'tw-text-text-weak hover:tw-text-text-x-weak',\n};\n\nexport const TooltipIcon: FC<TooltipIconProps> = ({\n tooltip,\n iconSize = IconSize.Size16,\n triggerIcon = <IconQuestionMarkCircle />,\n triggerStyle = TooltipIconTriggerStyle.Primary,\n}: TooltipIconProps) => {\n return (\n <div data-test-id=\"tooltip-icon\">\n {tooltip && (\n <div>\n <Tooltip\n triggerElement={\n <button\n type=\"button\"\n data-test-id=\"tooltip-icon-trigger\"\n className={merge([\n 'tw-inline-flex tw-justify-center tw-items-center tw-cursor-default tw-outline-none tw-rounded-full',\n FOCUS_VISIBLE_STYLE,\n tooltipTriggerStyleClass[triggerStyle],\n ])}\n >\n {cloneElement(triggerIcon, { size: iconSize })}\n </button>\n }\n withArrow={true}\n {...tooltip}\n />\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBY,IAAA,sBAAA,MACC,GAAA,SAAA,UACC,EAAA,UAAA,WACA,EAAA,UAAA,WAHF,IAAA,KAAA,CAAA,CAAA;AAMZ,MAAM,IAAoE;AAAA,EACtE,AAAC,QAAiC;AAAA,EAClC,AAAC,SAAkC;AAAA,EACnC,AAAC,SAAkC;AACvC,GAEa,KAAoC,CAAC;AAAA,EAC9C;AAAA,EACA,cAAW,EAAS;AAAA,EACpB,iDAAe,GAAuB,IAAA;AAAA,EACtC,kBAAe;AAAA,MAGV,kBAAA,cAAA,OAAA;AAAA,EAAI,gBAAa;AAAA,GACb,KACI,kBAAA,cAAA,OAAA,MACI,kBAAA,cAAA,GAAA;AAAA,EACG,gBACK,kBAAA,cAAA,UAAA;AAAA,IACG,MAAK;AAAA,IACL,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA,EAAyB;AAAA,IAAA,CAC5B;AAAA,EAAA,GAEA,EAAa,GAAa,EAAE,MAAM,EAAU,CAAA,CACjD;AAAA,EAEJ,WAAW;AAAA,EACV,GAAG;AACR,CAAA,CACJ,CAER;"}
1	+ {"version":3,"file":"TooltipIcon.es.js","sources":["../../../src/components/TooltipIcon/TooltipIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, cloneElement } from 'react';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { Tooltip, TooltipProps } from '@components/Tooltip/Tooltip';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { IconProps, IconQuestionMarkCircle } from '@foundation/Icon';\n\nexport type TooltipIconProps = {\n tooltip?: TooltipProps;\n iconSize?: IconSize;\n triggerIcon?: ReactElement<IconProps>;\n triggerStyle?: TooltipIconTriggerStyle;\n};\n\nexport enum TooltipIconTriggerStyle {\n Danger = 'Danger',\n Warning = 'Warning',\n Primary = 'Primary',\n}\n\nconst tooltipTriggerStyleClass: Record<TooltipIconTriggerStyle, string> = {\n [TooltipIconTriggerStyle.Danger]: 'tw-text-box-negative-strong hover:tw-text-box-negative-strong-hover',\n [TooltipIconTriggerStyle.Warning]: 'tw-text-box-warning-strong hover:tw-text-box-warning-strong-hover',\n [TooltipIconTriggerStyle.Primary]: 'tw-text-text-weak hover:tw-text-text-x-weak',\n};\n\nexport const TooltipIcon: FC<TooltipIconProps> = ({\n tooltip,\n iconSize = IconSize.Size16,\n triggerIcon = <IconQuestionMarkCircle />,\n triggerStyle = TooltipIconTriggerStyle.Primary,\n}: TooltipIconProps) => {\n return (\n <div data-test-id=\"tooltip-icon\">\n {tooltip && (\n <div>\n <Tooltip\n triggerElement={\n <button\n type=\"button\"\n data-test-id=\"tooltip-icon-trigger\"\n className={merge([\n 'tw-inline-flex tw-justify-center tw-items-center tw-cursor-default tw-outline-none tw-rounded-full',\n FOCUS_VISIBLE_STYLE,\n tooltipTriggerStyleClass[triggerStyle],\n ])}\n >\n {cloneElement(triggerIcon, { size: iconSize })}\n </button>\n }\n withArrow={true}\n {...tooltip}\n />\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBY,IAAA,sBAAA,MACC,GAAA,SAAA,UACC,EAAA,UAAA,WACA,EAAA,UAAA,WAHF,IAAA,KAAA,CAAA,CAAA;AAMZ,MAAM,IAAoE;AAAA,EACtE,AAAC,QAAiC;AAAA,EAClC,AAAC,SAAkC;AAAA,EACnC,AAAC,SAAkC;AACvC,GAEa,KAAoC,CAAC;AAAA,EAC9C;AAAA,EACA,cAAW,EAAS;AAAA,EACpB,iDAAe,GAAuB,IAAA;AAAA,EACtC,kBAAe;AAAA,MAGV,kBAAA,cAAA,OAAA;AAAA,EAAI,gBAAa;AAAA,GACb,KACI,kBAAA,cAAA,OAAA,MACI,kBAAA,cAAA,GAAA;AAAA,EACG,gBACK,kBAAA,cAAA,UAAA;AAAA,IACG,MAAK;AAAA,IACL,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA,EAAyB;AAAA,IAAA,CAC5B;AAAA,EAAA,GAEA,EAAa,GAAa,EAAE,MAAM,EAAU,CAAA,CACjD;AAAA,EAEJ,WAAW;AAAA,EACV,GAAG;AACR,CAAA,CACJ,CAER;"}

package/dist/components/Tree/Node.es.js CHANGED Viewed

@@ -1,30 +1,30 @@
-import e, { useState as H } from "react";
-import { merge as m } from "../../utilities/merge.es.js";
-import { useDrag as T } from "react-dnd";
-import { DropZone as N } from "../DropZone/DropZone.es.js";
+import e, { useState as y, useRef as D, useLayoutEffect as M } from "react";
+import { merge as d } from "../../utilities/merge.es.js";
+import { useDrag as Z } from "react-dnd";
+import { DropZone as k } from "../DropZone/DropZone.es.js";
 import "../../utilities/dnd/DndWrapper.es.js";
-import { DropZonePosition as E } from "../../utilities/dnd/types.es.js";
-import { EditableText as Z } from "../EditableText/EditableText.es.js";
-const z = ({
+import { DropZonePosition as O } from "../../utilities/dnd/types.es.js";
+import { EditableText as q } from "../EditableText/EditableText.es.js";
+const G = ({
   nodes: t,
-  activeIds: d,
+  activeIds: f,
   treeId: r,
   onClick: n,
   onDrop: s,
   onEditableSave: i,
-  parentIds: a
-}) => t.map((w, o) => /* @__PURE__ */ e.createElement(R, {
+  parentIds: l
+}) => t.map((w, a) => /* @__PURE__ */ e.createElement(K, {
   key: w.id,
   node: w,
-  nodeIndex: o,
-  activeIds: d,
+  nodeIndex: a,
+  activeIds: f,
   onClick: n,
-  isFirst: o === 0,
+  isFirst: a === 0,
   onDrop: s,
   onEditableSave: i,
-  parentIds: a,
+  parentIds: l,
   treeId: r
-})), L = (t, d) => {
+})), J = (t, f) => {
   const r = (n, s) => {
     if (n.nodes && s) {
       for (const i of n.nodes)
@@ -33,136 +33,156 @@ const z = ({
     }
     return !1;
   };
-  return r(t, d);
-}, R = ({
+  return r(t, f);
+}, K = ({
   node: t,
-  strong: d = !1,
+  strong: f = !1,
   activeIds: r,
   onClick: n,
   parentIds: s = [],
   isFirst: i,
-  onDrop: a,
+  onDrop: l,
   onEditableSave: w,
-  treeId: o
+  treeId: a
 }) => {
-  const { id: f, value: g, name: b, label: y, icon: v, nodes: u, actions: h, editable: k, badge: l } = t, [{ opacity: V }, B] = T({
-    item: { id: f, value: g, name: b, label: y, icon: v, nodes: u, actions: h, editable: k, badge: l },
-    collect: (x) => ({
-      opacity: x.isDragging() ? 0.4 : 1
+  const { id: p, value: v, name: u, label: j, icon: h, nodes: g, actions: E, editable: A, badge: c } = t, [{ opacity: z }, B] = Z({
+    item: { id: p, value: v, name: u, label: j, icon: h, nodes: g, actions: E, editable: A, badge: c },
+    collect: (o) => ({
+      opacity: o.isDragging() ? 0.4 : 1
     }),
-    type: o,
-    canDrag: a !== void 0
-  }), [p, j] = H(L(t, r)), [C, A] = H(!1), c = r && r.length > 0 && r.includes(f), P = () => A(!0), S = () => A(!1), D = () => {
-    if (!g) {
-      j(!p);
+    type: a,
+    canDrag: l !== void 0
+  }), [b, H] = y(J(t, r)), [C, L] = y(!1), m = r && r.length > 0 && r.includes(p), F = () => L(!0), P = () => L(!1), R = () => {
+    if (!v) {
+      H(!b);
       return;
     }
-    n && n(f);
-  }, M = (x) => {
-    x.stopPropagation(), j(!p);
-  }, F = () => /* @__PURE__ */ e.createElement("div", {
+    n && n(p);
+  }, S = (o) => {
+    o.stopPropagation(), H(!b);
+  }, T = () => /* @__PURE__ */ e.createElement("div", {
     "data-test-id": "node-badge",
-    className: m([
+    className: d([
       "tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak",
-      (l == null ? void 0 : l.props.size) && "tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full"
+      (c == null ? void 0 : c.props.size) && "tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full"
     ])
-  }, l);
+  }, c), x = D(null), [V, W] = y(!1);
+  M(() => (N(), window.addEventListener("resize", N), () => {
+    window.removeEventListener("resize", N);
+  }), []);
+  const N = () => {
+    if (x.current) {
+      const o = x.current.scrollWidth > x.current.clientWidth;
+      W(o);
+    }
+  };
   return /* @__PURE__ */ e.createElement("li", {
     "data-test-id": "node",
     ref: B,
-    style: { opacity: V }
-  }, i && /* @__PURE__ */ e.createElement(N, {
+    style: { opacity: z }
+  }, i && /* @__PURE__ */ e.createElement(k, {
     data: {
       targetItem: t,
-      position: E.Before
+      position: O.Before
     },
-    onDrop: a,
-    treeId: o
-  }), /* @__PURE__ */ e.createElement(N, {
+    onDrop: l,
+    treeId: a
+  }), /* @__PURE__ */ e.createElement(k, {
     data: {
       targetItem: t,
-      position: E.Within
+      position: O.Within
     },
-    onDrop: a,
-    treeId: o
+    onDrop: l,
+    treeId: a
   }, /* @__PURE__ */ e.createElement("div", {
-    className: m([
-      "tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5",
-      d && "tw-font-bold",
-      g && !c && "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
-      c && "tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover"
+    className: d([
+      "tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10",
+      f && "tw-font-bold",
+      v && !m && "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
+      m && "tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover"
     ]),
-    onMouseEnter: P,
-    onMouseLeave: S
+    onMouseEnter: F,
+    onMouseLeave: P
   }, /* @__PURE__ */ e.createElement("a", {
     "data-test-id": "node-link",
-    className: m([
-      "tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer",
+    className: d([
+      "tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer tw-h-6",
       s.length === 1 && "tw-pl-4",
       s.length > 1 && "tw-pl-8"
     ]),
-    "aria-selected": c,
-    onClick: D
+    "aria-selected": m,
+    onClick: R
   }, /* @__PURE__ */ e.createElement("div", {
-    className: "tw-flex tw-space-x-1 tw-items-center"
+    className: "tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-full"
   }, /* @__PURE__ */ e.createElement("span", {
     "data-test-id": "toggle",
     className: "tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center",
-    onClick: M
-  }, u && /* @__PURE__ */ e.createElement("div", {
-    className: m([
+    onClick: S
+  }, g && /* @__PURE__ */ e.createElement("div", {
+    className: d([
       "tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong",
-      p ? "tw-rotate-90" : "",
-      c && "tw-text-box-selected-strong-inverse"
+      b ? "tw-rotate-90" : "",
+      m && "tw-text-box-selected-strong-inverse"
     ])
-  })), v && /* @__PURE__ */ e.createElement("span", {
+  })), h && /* @__PURE__ */ e.createElement("span", {
     className: "tw-flex tw-justify-center tw-items-center tw-w-5"
-  }, v), k && w ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(Z, {
+  }, h), A && w ? /* @__PURE__ */ e.createElement("div", {
+    ref: x,
+    className: "tw-relative tw-top-[0.2rem] tw-w-full tw-flex-1 tw-h-full"
+  }, /* @__PURE__ */ e.createElement(q, {
     options: {
       additionalValues: t.id,
       enableDoubleClick: !0,
       isSlimInputField: !0,
       removeBoxPadding: !0
     },
-    onAdditionalValueSave: w
-  }, /* @__PURE__ */ e.createElement("p", null, b)), l && F()) : /* @__PURE__ */ e.createElement("span", {
-    className: "tw-flex tw-items-center",
+    onAdditionalValueSave: w,
+    isOverflowing: !0
+  }, /* @__PURE__ */ e.createElement("span", {
+    title: V ? u : "",
+    className: "tw-max-w-full tw-absolute tw-top-[-0.08rem] tw-truncate"
+  }, u))) : /* @__PURE__ */ e.createElement("span", {
+    className: "tw-flex tw-items-center tw-flex-1 tw-relative tw-h-10",
+    title: V ? u : "",
     "data-test-id": "node-link-name"
-  }, b, l && F())), /* @__PURE__ */ e.createElement("div", {
+  }, /* @__PURE__ */ e.createElement("span", {
+    ref: x,
+    className: "tw-truncate tw-max-w-full tw-absolute"
+  }, u)), /* @__PURE__ */ e.createElement("span", null, c && T())), /* @__PURE__ */ e.createElement("div", {
     className: "tw-px-1.5"
   }, /* @__PURE__ */ e.createElement("span", {
     "data-test-id": "node-label",
-    className: m([
+    className: d([
       "tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal",
-      c && "tw-text-box-selected-strong-inverse"
+      m && "tw-text-box-selected-strong-inverse"
     ])
-  }, y))), h && /* @__PURE__ */ e.createElement("div", {
-    className: m([
+  }, j))), E && /* @__PURE__ */ e.createElement("div", {
+    className: d([
       "tw-flex tw-items-center",
-      C || c ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
+      C || m ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
     ])
-  }, h.map((x) => x)))), u && p && /* @__PURE__ */ e.createElement("ul", {
+  }, E.map((o) => o)))), g && b && /* @__PURE__ */ e.createElement("ul", {
     className: "tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left",
     "data-test-id": "sub-tree"
-  }, z({
-    nodes: u,
-    treeId: o,
+  }, G({
+    nodes: g,
+    treeId: a,
     activeIds: r,
     onClick: n,
-    onDrop: a,
+    onDrop: l,
     onEditableSave: w,
-    parentIds: [...s, f]
-  })), /* @__PURE__ */ e.createElement(N, {
+    parentIds: [...s, p]
+  })), /* @__PURE__ */ e.createElement(k, {
     data: {
       targetItem: t,
-      position: E.After
+      position: O.After
     },
-    onDrop: a,
-    treeId: o
+    onDrop: l,
+    treeId: a
   }));
 };
 export {
-  R as Node,
-  z as renderNodeArray
+  K as Node,
+  G as renderNodeArray
 };
 //# sourceMappingURL=Node.es.js.map

package/dist/components/Tree/Node.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport React, { ReactElement, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useDrag } from 'react-dnd';\nimport { DropZone, OnDropCallback } from '@components/DropZone';\nimport { TreeFlatListItem } from '@components/Tree';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\nimport { EditableText } from '../EditableText';\n\nexport type RenderNodeArrayData = Omit<NodeProps, 'isFirst' \| 'strong' \| 'node'> & {\n nodes: DraggableItem<TreeNodeItem>[];\n};\n\nexport const renderNodeArray = ({\n nodes,\n activeIds,\n treeId,\n onClick,\n onDrop,\n onEditableSave,\n parentIds,\n}: RenderNodeArrayData) =>\n nodes.map((node, i) => (\n <Node\n key={node.id}\n node={node}\n nodeIndex={i}\n activeIds={activeIds}\n onClick={onClick}\n isFirst={i === 0}\n onDrop={onDrop}\n onEditableSave={onEditableSave}\n parentIds={parentIds}\n treeId={treeId}\n />\n ));\n\nexport interface TreeNodeItem extends TreeFlatListItem {\n nodes?: DraggableItem<TreeNodeItem>[];\n}\n\ntype NodeProps = {\n node: DraggableItem<TreeNodeItem>;\n strong?: boolean;\n nodeIndex?: number;\n activeIds?: NullableString[];\n parentIds?: string[];\n onClick: (id: NullableString) => void;\n isFirst: boolean;\n treeId: string;\n onDrop?: OnDropCallback<TreeNodeItem>;\n onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nconst getInitialShowNodesValue = (\n currentNode: DraggableItem<TreeNodeItem>,\n activeNodeIds?: NullableString[],\n): boolean => {\n const hasActiveChildNodes = (node: DraggableItem<TreeNodeItem>, activeIds?: NullableString[]): boolean => {\n if (node.nodes && activeIds) {\n for (const childNode of node.nodes) {\n if (activeIds.includes(childNode.id) \|\| hasActiveChildNodes(childNode, activeIds)) {\n return true;\n }\n }\n }\n return false;\n };\n\n return hasActiveChildNodes(currentNode, activeNodeIds);\n};\n\nexport const Node = ({\n node,\n strong = false,\n activeIds,\n onClick,\n parentIds = [],\n isFirst,\n onDrop,\n onEditableSave,\n treeId,\n}: NodeProps): ReactElement<NodeProps> => {\n const { id, value, name, label, icon, nodes, actions, editable, badge } = node;\n const [{ opacity }, drag] = useDrag({\n item: { id, value, name, label, icon, nodes, actions, editable, badge },\n collect: (monitor) => ({\n opacity: monitor.isDragging() ? 0.4 : 1,\n }),\n type: treeId,\n canDrag: onDrop !== undefined,\n });\n const [showNodes, setShowNodes] = useState(getInitialShowNodesValue(node, activeIds));\n const [isHovered, setIsHovered] = useState(false);\n const selected = activeIds && activeIds.length > 0 && activeIds.includes(id);\n\n const setHoveredTrue = () => setIsHovered(true);\n const setHoveredFalse = () => setIsHovered(false);\n const onNodeClick = () => {\n if (!value) {\n setShowNodes(!showNodes);\n return;\n }\n\n if (onClick) {\n onClick(id);\n }\n };\n const toggleNodesVisibility = (event: React.MouseEvent) => {\n event.stopPropagation();\n setShowNodes(!showNodes);\n };\n\n const insertBadge = () => {\n return (\n <div\n data-test-id=\"node-badge\"\n className={merge([\n 'tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak',\n badge?.props.size && 'tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full',\n ])}\n >\n {badge}\n </div>\n );\n };\n\n / eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions /\n return (\n <li data-test-id=\"node\" ref={drag} style={{ opacity }}>\n {isFirst && (\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Before,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Within,\n }}\n onDrop={onDrop}\n treeId={treeId}\n >\n <div\n className={merge([\n 'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5',\n strong && 'tw-font-bold',\n value &&\n !selected &&\n 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n selected &&\n 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ])}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n >\n <a\n data-test-id=\"node-link\"\n className={merge([\n 'tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer',\n parentIds.length === 1 && 'tw-pl-4',\n parentIds.length > 1 && 'tw-pl-8',\n ])}\n aria-selected={selected}\n onClick={onNodeClick}\n >\n <div className=\"tw-flex tw-space-x-1 tw-items-center\">\n <span\n data-test-id=\"toggle\"\n className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\"\n onClick={toggleNodesVisibility}\n >\n {nodes && (\n <div\n className={merge([\n 'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n showNodes ? 'tw-rotate-90' : '',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n ></div>\n )}\n </span>\n {icon && <span className=\"tw-flex tw-justify-center tw-items-center tw-w-5\">{icon}</span>}\n {editable && onEditableSave ? (\n <>\n <EditableText\n options={{\n additionalValues: node.id,\n enableDoubleClick: true,\n isSlimInputField: true,\n removeBoxPadding: true,\n }}\n onAdditionalValueSave={onEditableSave}\n >\n <p>{name}</p>\n </EditableText>\n {badge && insertBadge()}\n </>\n ) : (\n <span className=\"tw-flex tw-items-center\" data-test-id=\"node-link-name\">\n {name}\n {badge && insertBadge()}\n </span>\n )}\n </div>\n <div className=\"tw-px-1.5\">\n <span\n data-test-id=\"node-label\"\n className={merge([\n 'tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n >\n {label}\n </span>\n </div>\n </a>\n\n {actions && (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n isHovered \|\| selected ? 'tw-visible tw-space-x-1.5' : 'tw-invisible tw-w-0',\n ])}\n >\n {actions.map((action) => action)}\n </div>\n )}\n </div>\n </DropZone>\n\n {nodes && showNodes && (\n <ul\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left\"\n data-test-id=\"sub-tree\"\n >\n {renderNodeArray({\n nodes,\n treeId,\n activeIds,\n onClick,\n onDrop,\n onEditableSave,\n parentIds: [...parentIds, id],\n })}\n </ul>\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.After,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n </li>\n );\n / eslint-enable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport React, { ReactElement, useLayoutEffect, useRef, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useDrag } from 'react-dnd';\nimport { DropZone, OnDropCallback } from '@components/DropZone';\nimport { TreeFlatListItem } from '@components/Tree';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\nimport { EditableText } from '../EditableText';\n\nexport type RenderNodeArrayData = Omit<NodeProps, 'isFirst' \| 'strong' \| 'node'> & {\n nodes: DraggableItem<TreeNodeItem>[];\n};\n\nexport const renderNodeArray = ({\n nodes,\n activeIds,\n treeId,\n onClick,\n onDrop,\n onEditableSave,\n parentIds,\n}: RenderNodeArrayData) =>\n nodes.map((node, i) => (\n <Node\n key={node.id}\n node={node}\n nodeIndex={i}\n activeIds={activeIds}\n onClick={onClick}\n isFirst={i === 0}\n onDrop={onDrop}\n onEditableSave={onEditableSave}\n parentIds={parentIds}\n treeId={treeId}\n />\n ));\n\nexport interface TreeNodeItem extends TreeFlatListItem {\n nodes?: DraggableItem<TreeNodeItem>[];\n}\n\ntype NodeProps = {\n node: DraggableItem<TreeNodeItem>;\n strong?: boolean;\n nodeIndex?: number;\n activeIds?: NullableString[];\n parentIds?: string[];\n onClick: (id: NullableString) => void;\n isFirst: boolean;\n treeId: string;\n onDrop?: OnDropCallback<TreeNodeItem>;\n onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nconst getInitialShowNodesValue = (\n currentNode: DraggableItem<TreeNodeItem>,\n activeNodeIds?: NullableString[],\n): boolean => {\n const hasActiveChildNodes = (node: DraggableItem<TreeNodeItem>, activeIds?: NullableString[]): boolean => {\n if (node.nodes && activeIds) {\n for (const childNode of node.nodes) {\n if (activeIds.includes(childNode.id) \|\| hasActiveChildNodes(childNode, activeIds)) {\n return true;\n }\n }\n }\n return false;\n };\n\n return hasActiveChildNodes(currentNode, activeNodeIds);\n};\n\nexport const Node = ({\n node,\n strong = false,\n activeIds,\n onClick,\n parentIds = [],\n isFirst,\n onDrop,\n onEditableSave,\n treeId,\n}: NodeProps): ReactElement<NodeProps> => {\n const { id, value, name, label, icon, nodes, actions, editable, badge } = node;\n const [{ opacity }, drag] = useDrag({\n item: { id, value, name, label, icon, nodes, actions, editable, badge },\n collect: (monitor) => ({\n opacity: monitor.isDragging() ? 0.4 : 1,\n }),\n type: treeId,\n canDrag: onDrop !== undefined,\n });\n const [showNodes, setShowNodes] = useState(getInitialShowNodesValue(node, activeIds));\n const [isHovered, setIsHovered] = useState(false);\n const selected = activeIds && activeIds.length > 0 && activeIds.includes(id);\n\n const setHoveredTrue = () => setIsHovered(true);\n const setHoveredFalse = () => setIsHovered(false);\n const onNodeClick = () => {\n if (!value) {\n setShowNodes(!showNodes);\n return;\n }\n\n if (onClick) {\n onClick(id);\n }\n };\n const toggleNodesVisibility = (event: React.MouseEvent) => {\n event.stopPropagation();\n setShowNodes(!showNodes);\n };\n\n const insertBadge = () => {\n return (\n <div\n data-test-id=\"node-badge\"\n className={merge([\n 'tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak',\n badge?.props.size && 'tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full',\n ])}\n >\n {badge}\n </div>\n );\n };\n\n const nameRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useLayoutEffect(() => {\n checkIfOverflowing();\n\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, []);\n\n const checkIfOverflowing = () => {\n if (nameRef.current) {\n const isTextOverflowing = nameRef.current.scrollWidth > nameRef.current.clientWidth;\n setIsOverflowing(isTextOverflowing);\n }\n };\n\n / eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions /\n return (\n <li data-test-id=\"node\" ref={drag} style={{ opacity }}>\n {isFirst && (\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Before,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Within,\n }}\n onDrop={onDrop}\n treeId={treeId}\n >\n <div\n className={merge([\n 'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n strong && 'tw-font-bold',\n value &&\n !selected &&\n 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n selected &&\n 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ])}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n >\n <a\n data-test-id=\"node-link\"\n className={merge([\n 'tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer tw-h-6',\n parentIds.length === 1 && 'tw-pl-4',\n parentIds.length > 1 && 'tw-pl-8',\n ])}\n aria-selected={selected}\n onClick={onNodeClick}\n >\n <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-full\">\n <span\n data-test-id=\"toggle\"\n className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\"\n onClick={toggleNodesVisibility}\n >\n {nodes && (\n <div\n className={merge([\n 'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n showNodes ? 'tw-rotate-90' : '',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n ></div>\n )}\n </span>\n {icon && <span className=\"tw-flex tw-justify-center tw-items-center tw-w-5\">{icon}</span>}\n {editable && onEditableSave ? (\n <div\n ref={nameRef}\n className=\"tw-relative tw-top-[0.2rem] tw-w-full tw-flex-1 tw-h-full\"\n >\n <EditableText\n options={{\n additionalValues: node.id,\n enableDoubleClick: true,\n isSlimInputField: true,\n removeBoxPadding: true,\n }}\n onAdditionalValueSave={onEditableSave}\n isOverflowing={true}\n >\n <span\n title={isOverflowing ? name : ''}\n className=\"tw-max-w-full tw-absolute tw-top-[-0.08rem] tw-truncate\"\n >\n {name}\n </span>\n </EditableText>\n </div>\n ) : (\n <span\n className=\"tw-flex tw-items-center tw-flex-1 tw-relative tw-h-10\"\n title={isOverflowing ? name : ''}\n data-test-id=\"node-link-name\"\n >\n <span ref={nameRef} className=\"tw-truncate tw-max-w-full tw-absolute\">\n {name}\n </span>\n </span>\n )}\n <span>{badge && insertBadge()}</span>\n </div>\n <div className=\"tw-px-1.5\">\n <span\n data-test-id=\"node-label\"\n className={merge([\n 'tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n >\n {label}\n </span>\n </div>\n </a>\n\n {actions && (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n isHovered \|\| selected ? 'tw-visible tw-space-x-1.5' : 'tw-invisible tw-w-0',\n ])}\n >\n {actions.map((action) => action)}\n </div>\n )}\n </div>\n </DropZone>\n\n {nodes && showNodes && (\n <ul\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left\"\n data-test-id=\"sub-tree\"\n >\n {renderNodeArray({\n nodes,\n treeId,\n activeIds,\n onClick,\n onDrop,\n onEditableSave,\n parentIds: [...parentIds, id],\n })}\n </ul>\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.After,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n </li>\n );\n / eslint-enable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Tree/Tree.es.js CHANGED Viewed

@@ -1349,6 +1349,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1659,7 +1671,7 @@ import "@react-stately/collections";
 import "@react-stately/tree";
 import "./utils/mocks.es.js";
 import { listToTree as D } from "./utils/listToTree.es.js";
-const LB = ({
+const FB = ({
   nodes: e,
   onSelect: c,
   activeNodeIds: E,
@@ -1717,6 +1729,6 @@ const LB = ({
   })));
 };
 export {
-  LB as Tree
+  FB as Tree
 };
 //# sourceMappingURL=Tree.es.js.map