@bitrise/bitkit-v2 0.3.514 → 0.3.516-beta.3300
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/BitkitField/BitkitField.d.ts +1 -0
- package/dist/components/BitkitField/BitkitField.js +4 -3
- package/dist/components/BitkitField/BitkitField.js.map +1 -1
- package/dist/components/BitkitPopover/BitkitPopover.d.ts +10 -1
- package/dist/components/BitkitPopover/BitkitPopover.js +41 -23
- package/dist/components/BitkitPopover/BitkitPopover.js.map +1 -1
- package/dist/components/BitkitTagsInput/BitkitTagsInput.js +1 -1
- package/dist/components/BitkitTagsInput/BitkitTagsInput.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ export interface BitkitFieldProps extends Omit<Field.RootProps, 'disabled' | 'in
|
|
|
13
13
|
* Badge, counter and tooltip are omitted in this mode, since they are purely visual.
|
|
14
14
|
*/
|
|
15
15
|
labelHidden?: boolean;
|
|
16
|
+
/** Mark the field as not required. A `readOnly` field is never filled in, so it is neither required nor labelled optional. */
|
|
16
17
|
optional?: boolean;
|
|
17
18
|
state?: 'disabled' | 'error' | 'readOnly' | 'warning';
|
|
18
19
|
tooltip?: string;
|
|
@@ -7,6 +7,7 @@ import { VisuallyHidden } from "@chakra-ui/react/visually-hidden";
|
|
|
7
7
|
var BitkitField = forwardRef((props, ref) => {
|
|
8
8
|
const { badge, counterText, children, errorText, helperText, label, labelHidden, optional, state, tooltip, warningText, ...rest } = props;
|
|
9
9
|
const isInvalid = state === "error" || !!errorText;
|
|
10
|
+
const isReadOnly = state === "readOnly";
|
|
10
11
|
let labelNode = null;
|
|
11
12
|
if (labelHidden) labelNode = label ? /* @__PURE__ */ jsx(VisuallyHidden, {
|
|
12
13
|
asChild: true,
|
|
@@ -17,7 +18,7 @@ var BitkitField = forwardRef((props, ref) => {
|
|
|
17
18
|
children: /* @__PURE__ */ jsx(BitkitLabel, {
|
|
18
19
|
badge,
|
|
19
20
|
counterText,
|
|
20
|
-
optional,
|
|
21
|
+
optional: isReadOnly ? false : optional,
|
|
21
22
|
tooltip,
|
|
22
23
|
children: label
|
|
23
24
|
})
|
|
@@ -25,8 +26,8 @@ var BitkitField = forwardRef((props, ref) => {
|
|
|
25
26
|
return /* @__PURE__ */ jsxs(Field.Root, {
|
|
26
27
|
disabled: state === "disabled",
|
|
27
28
|
invalid: isInvalid,
|
|
28
|
-
readOnly:
|
|
29
|
-
required: !optional,
|
|
29
|
+
readOnly: isReadOnly,
|
|
30
|
+
required: !optional && !isReadOnly,
|
|
30
31
|
ref,
|
|
31
32
|
...rest,
|
|
32
33
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitField.js","names":[],"sources":["../../../lib/components/BitkitField/BitkitField.tsx"],"sourcesContent":["import { Field } from '@chakra-ui/react/field';\nimport { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\nexport interface BitkitFieldProps extends Omit<Field.RootProps, 'disabled' | 'invalid' | 'readOnly'> {\n badge?: ReactNode;\n children: ReactNode;\n counterText?: string;\n errorText?: ReactNode;\n helperText?: ReactNode;\n label?: string;\n /**\n * Keep the label in the accessibility tree (associated with the control) but hide it visually.\n * For fields whose purpose is already visually obvious — e.g. a search input with a magnifier icon.\n * Badge, counter and tooltip are omitted in this mode, since they are purely visual.\n */\n labelHidden?: boolean;\n optional?: boolean;\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n tooltip?: string;\n warningText?: ReactNode;\n}\n\nconst BitkitField = forwardRef<HTMLDivElement, BitkitFieldProps>((props, ref) => {\n const {\n badge,\n counterText,\n children,\n errorText,\n helperText,\n label,\n labelHidden,\n optional,\n state,\n tooltip,\n warningText,\n ...rest\n } = props;\n\n const isInvalid = state === 'error' || !!errorText;\n\n let labelNode: ReactNode = null;\n if (labelHidden) {\n // Field.Label still wires `htmlFor` to the control; VisuallyHidden only strips it from view.\n labelNode = label ? (\n <VisuallyHidden asChild>\n <Field.Label>{label}</Field.Label>\n </VisuallyHidden>\n ) : null;\n } else if (label || badge || counterText) {\n labelNode = (\n <Field.Label asChild>\n <BitkitLabel badge={badge} counterText={counterText} optional={optional} tooltip={tooltip}>\n {label}\n </BitkitLabel>\n </Field.Label>\n );\n }\n\n return (\n <Field.Root\n disabled={state === 'disabled'}\n invalid={isInvalid}\n readOnly={
|
|
1
|
+
{"version":3,"file":"BitkitField.js","names":[],"sources":["../../../lib/components/BitkitField/BitkitField.tsx"],"sourcesContent":["import { Field } from '@chakra-ui/react/field';\nimport { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\nexport interface BitkitFieldProps extends Omit<Field.RootProps, 'disabled' | 'invalid' | 'readOnly'> {\n badge?: ReactNode;\n children: ReactNode;\n counterText?: string;\n errorText?: ReactNode;\n helperText?: ReactNode;\n label?: string;\n /**\n * Keep the label in the accessibility tree (associated with the control) but hide it visually.\n * For fields whose purpose is already visually obvious — e.g. a search input with a magnifier icon.\n * Badge, counter and tooltip are omitted in this mode, since they are purely visual.\n */\n labelHidden?: boolean;\n /** Mark the field as not required. A `readOnly` field is never filled in, so it is neither required nor labelled optional. */\n optional?: boolean;\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n tooltip?: string;\n warningText?: ReactNode;\n}\n\nconst BitkitField = forwardRef<HTMLDivElement, BitkitFieldProps>((props, ref) => {\n const {\n badge,\n counterText,\n children,\n errorText,\n helperText,\n label,\n labelHidden,\n optional,\n state,\n tooltip,\n warningText,\n ...rest\n } = props;\n\n const isInvalid = state === 'error' || !!errorText;\n const isReadOnly = state === 'readOnly';\n\n let labelNode: ReactNode = null;\n if (labelHidden) {\n // Field.Label still wires `htmlFor` to the control; VisuallyHidden only strips it from view.\n labelNode = label ? (\n <VisuallyHidden asChild>\n <Field.Label>{label}</Field.Label>\n </VisuallyHidden>\n ) : null;\n } else if (label || badge || counterText) {\n labelNode = (\n <Field.Label asChild>\n <BitkitLabel badge={badge} counterText={counterText} optional={isReadOnly ? false : optional} tooltip={tooltip}>\n {label}\n </BitkitLabel>\n </Field.Label>\n );\n }\n\n return (\n <Field.Root\n disabled={state === 'disabled'}\n invalid={isInvalid}\n readOnly={isReadOnly}\n required={!optional && !isReadOnly}\n ref={ref}\n {...rest}\n >\n {labelNode}\n {children}\n {!!helperText && !errorText && !warningText && <Field.HelperText>{helperText}</Field.HelperText>}\n {!!warningText && !errorText && <Field.HelperText color=\"text/body\">{warningText}</Field.HelperText>}\n {!!errorText && <Field.ErrorText>{errorText}</Field.ErrorText>}\n </Field.Root>\n );\n});\n\nBitkitField.displayName = 'BitkitField';\n\nexport default BitkitField;\n"],"mappings":";;;;;;AA0BA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EACJ,OACA,aACA,UACA,WACA,YACA,OACA,aACA,UACA,OACA,SACA,aACA,GAAG,SACD;CAEJ,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC;CACzC,MAAM,aAAa,UAAU;CAE7B,IAAI,YAAuB;CAC3B,IAAI,aAEF,YAAY,QACV,oBAAC,gBAAD;EAAgB,SAAA;EACd,UAAA,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA;CACnB,CAAA,IACd;MACC,IAAI,SAAS,SAAS,aAC3B,YACE,oBAAC,MAAM,OAAP;EAAa,SAAA;EACX,UAAA,oBAAC,aAAD;GAAoB;GAAoB;GAAa,UAAU,aAAa,QAAQ;GAAmB;GACpG,UAAA;EACU,CAAA;CACF,CAAA;CAIjB,OACE,qBAAC,MAAM,MAAP;EACE,UAAU,UAAU;EACpB,SAAS;EACT,UAAU;EACV,UAAU,CAAC,YAAY,CAAC;EACnB;EACL,GAAI;EANN,UAAA;GAQG;GACA;GACA,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,eAAe,oBAAC,MAAM,YAAP,EAAA,UAAmB,WAA6B,CAAA;GAC9F,CAAC,CAAC,eAAe,CAAC,aAAa,oBAAC,MAAM,YAAP;IAAkB,OAAM;IAAa,UAAA;GAA8B,CAAA;GAClG,CAAC,CAAC,aAAa,oBAAC,MAAM,WAAP,EAAA,UAAkB,UAA2B,CAAA;EACnD;;AAEhB,CAAC;AAED,YAAY,cAAc"}
|
|
@@ -19,6 +19,11 @@ export interface BitkitPopoverProps {
|
|
|
19
19
|
autoFocus?: PopoverRootProps['autoFocus'];
|
|
20
20
|
open?: PopoverRootProps['open'];
|
|
21
21
|
defaultOpen?: PopoverRootProps['defaultOpen'];
|
|
22
|
+
/**
|
|
23
|
+
* Render the panel inline instead of in a portal. Only needed when it must stay inside its
|
|
24
|
+
* parent's DOM subtree — a dialog already sets this for you.
|
|
25
|
+
*/
|
|
26
|
+
disablePortal?: boolean;
|
|
22
27
|
onOpenChange?: (open: boolean) => void;
|
|
23
28
|
positioning?: PopoverRootProps['positioning'];
|
|
24
29
|
persistentElements?: PopoverRootProps['persistentElements'];
|
|
@@ -28,9 +33,13 @@ export interface BitkitPopoverProps {
|
|
|
28
33
|
* a header (title + close button), a scrollable body, and an optional footer. Anchor it with a
|
|
29
34
|
* `trigger`, or — when the trigger can't be wrapped — control `open` and pass
|
|
30
35
|
* `positioning.getAnchorElement`.
|
|
36
|
+
*
|
|
37
|
+
* The panel is mounted only while open, and renders in a portal so it escapes any ancestor that
|
|
38
|
+
* traps stacking or clips overflow. Dialogs turn that off through `BitkitPortalContext`;
|
|
39
|
+
* `disablePortal` is the manual override.
|
|
31
40
|
*/
|
|
32
41
|
declare const BitkitPopover: {
|
|
33
|
-
({ children, title, footer, trigger, autoFocus, open, defaultOpen, onOpenChange, positioning, persistentElements, }: BitkitPopoverProps): import('react').JSX.Element;
|
|
42
|
+
({ children, title, footer, trigger, autoFocus, open, defaultOpen, disablePortal, onOpenChange, positioning, persistentElements, }: BitkitPopoverProps): import('react').JSX.Element;
|
|
34
43
|
displayName: string;
|
|
35
44
|
};
|
|
36
45
|
export default BitkitPopover;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import IconArrowDown from "../../icons/IconArrowDown.js";
|
|
2
|
+
import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
|
|
2
3
|
import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
|
|
3
4
|
import { chakra } from "@chakra-ui/react/styled-system";
|
|
4
|
-
import { useCallback, useEffect, useRef, useState } from "react";
|
|
5
|
+
import { useCallback, useContext, useEffect, useId, useRef, useState } from "react";
|
|
5
6
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import { Box } from "@chakra-ui/react/box";
|
|
7
8
|
import { Portal } from "@chakra-ui/react/portal";
|
|
@@ -63,30 +64,47 @@ var ScrollablePopoverBody = ({ children }) => {
|
|
|
63
64
|
* a header (title + close button), a scrollable body, and an optional footer. Anchor it with a
|
|
64
65
|
* `trigger`, or — when the trigger can't be wrapped — control `open` and pass
|
|
65
66
|
* `positioning.getAnchorElement`.
|
|
67
|
+
*
|
|
68
|
+
* The panel is mounted only while open, and renders in a portal so it escapes any ancestor that
|
|
69
|
+
* traps stacking or clips overflow. Dialogs turn that off through `BitkitPortalContext`;
|
|
70
|
+
* `disablePortal` is the manual override.
|
|
66
71
|
*/
|
|
67
|
-
var BitkitPopover = ({ children, title, footer, trigger, autoFocus, open, defaultOpen, onOpenChange, positioning, persistentElements }) =>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
72
|
+
var BitkitPopover = ({ children, title, footer, trigger, autoFocus, open, defaultOpen, disablePortal, onOpenChange, positioning, persistentElements }) => {
|
|
73
|
+
const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
|
|
74
|
+
const titleId = useId();
|
|
75
|
+
return /* @__PURE__ */ jsxs(Popover.Root, {
|
|
76
|
+
autoFocus,
|
|
77
|
+
ids: { title: titleId },
|
|
78
|
+
open,
|
|
79
|
+
defaultOpen,
|
|
80
|
+
lazyMount: true,
|
|
81
|
+
onOpenChange: onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : void 0,
|
|
82
|
+
positioning: {
|
|
83
|
+
placement: "bottom-start",
|
|
84
|
+
gutter: 4,
|
|
85
|
+
...positioning
|
|
86
|
+
},
|
|
87
|
+
persistentElements,
|
|
88
|
+
unmountOnExit: true,
|
|
89
|
+
children: [trigger ? /* @__PURE__ */ jsx(Popover.Trigger, {
|
|
83
90
|
asChild: true,
|
|
84
|
-
children:
|
|
85
|
-
})
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
91
|
+
children: trigger
|
|
92
|
+
}) : null, /* @__PURE__ */ jsx(Portal, {
|
|
93
|
+
disabled: disablePortal || disablePortalFromContext,
|
|
94
|
+
children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, {
|
|
95
|
+
"aria-labelledby": titleId,
|
|
96
|
+
children: [
|
|
97
|
+
/* @__PURE__ */ jsxs(Popover.Header, { children: [/* @__PURE__ */ jsx(Popover.Title, { children: title }), /* @__PURE__ */ jsx(Popover.CloseTrigger, {
|
|
98
|
+
asChild: true,
|
|
99
|
+
children: /* @__PURE__ */ jsx(BitkitCloseButton, { "aria-label": "Close" })
|
|
100
|
+
})] }),
|
|
101
|
+
/* @__PURE__ */ jsx(ScrollablePopoverBody, { children }),
|
|
102
|
+
footer ? /* @__PURE__ */ jsx(Popover.Footer, { children: footer }) : null
|
|
103
|
+
]
|
|
104
|
+
}) })
|
|
105
|
+
})]
|
|
106
|
+
});
|
|
107
|
+
};
|
|
90
108
|
BitkitPopover.displayName = "BitkitPopover";
|
|
91
109
|
//#endregion
|
|
92
110
|
export { BitkitPopover as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPopover.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n /** Body content of the panel. Scrolls within the panel when it overflows. */\n children: ReactNode;\n /** Header title, shown next to the close button. */\n title: ReactNode;\n /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n footer?: ReactNode;\n /**\n * Element that toggles and anchors the popover. Omit when anchoring via\n * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n */\n trigger?: ReactNode;\n /**\n * Move focus into the panel when it opens (default `true`). Turn it off for a panel that opens\n * while the user is typing elsewhere, such as hints beside a focused input.\n */\n autoFocus?: PopoverRootProps['autoFocus'];\n open?: PopoverRootProps['open'];\n defaultOpen?: PopoverRootProps['defaultOpen'];\n onOpenChange?: (open: boolean) => void;\n positioning?: PopoverRootProps['positioning'];\n persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n const styles = usePopoverStyles();\n const { open } = usePopoverContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return undefined;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Popover.Body ref={contentRef}>{children}</Popover.Body>\n {isScrollButtonVisible && (\n <>\n <Box css={styles.scrollGradient} />\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n */\nconst BitkitPopover = ({\n children,\n title,\n footer,\n trigger,\n autoFocus,\n open,\n defaultOpen,\n onOpenChange,\n positioning,\n persistentElements,\n}: BitkitPopoverProps) => (\n <Popover.Root\n
|
|
1
|
+
{"version":3,"file":"BitkitPopover.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useContext, useEffect, useId, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n /** Body content of the panel. Scrolls within the panel when it overflows. */\n children: ReactNode;\n /** Header title, shown next to the close button. */\n title: ReactNode;\n /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n footer?: ReactNode;\n /**\n * Element that toggles and anchors the popover. Omit when anchoring via\n * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n */\n trigger?: ReactNode;\n /**\n * Move focus into the panel when it opens (default `true`). Turn it off for a panel that opens\n * while the user is typing elsewhere, such as hints beside a focused input.\n */\n autoFocus?: PopoverRootProps['autoFocus'];\n open?: PopoverRootProps['open'];\n defaultOpen?: PopoverRootProps['defaultOpen'];\n /**\n * Render the panel inline instead of in a portal. Only needed when it must stay inside its\n * parent's DOM subtree — a dialog already sets this for you.\n */\n disablePortal?: boolean;\n onOpenChange?: (open: boolean) => void;\n positioning?: PopoverRootProps['positioning'];\n persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n const styles = usePopoverStyles();\n const { open } = usePopoverContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return undefined;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Popover.Body ref={contentRef}>{children}</Popover.Body>\n {isScrollButtonVisible && (\n <>\n <Box css={styles.scrollGradient} />\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n *\n * The panel is mounted only while open, and renders in a portal so it escapes any ancestor that\n * traps stacking or clips overflow. Dialogs turn that off through `BitkitPortalContext`;\n * `disablePortal` is the manual override.\n */\nconst BitkitPopover = ({\n children,\n title,\n footer,\n trigger,\n autoFocus,\n open,\n defaultOpen,\n disablePortal,\n onOpenChange,\n positioning,\n persistentElements,\n}: BitkitPopoverProps) => {\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const titleId = useId();\n\n return (\n <Popover.Root\n autoFocus={autoFocus}\n ids={{ title: titleId }}\n open={open}\n defaultOpen={defaultOpen}\n lazyMount\n onOpenChange={onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : undefined}\n positioning={{ placement: 'bottom-start', gutter: 4, ...positioning }}\n persistentElements={persistentElements}\n unmountOnExit\n >\n {trigger ? <Popover.Trigger asChild>{trigger}</Popover.Trigger> : null}\n <Portal disabled={disablePortal || disablePortalFromContext}>\n {/* z-index belongs on Content, not Positioner: Zag derives the positioner's inline z-index\n from Content's computed z-index, so a value set on Positioner is ignored. */}\n <Popover.Positioner>\n <Popover.Content aria-labelledby={titleId}>\n <Popover.Header>\n <Popover.Title>{title}</Popover.Title>\n <Popover.CloseTrigger asChild>\n <BitkitCloseButton aria-label=\"Close\" />\n </Popover.CloseTrigger>\n </Popover.Header>\n <ScrollablePopoverBody>{children}</ScrollablePopoverBody>\n {footer ? <Popover.Footer>{footer}</Popover.Footer> : null}\n </Popover.Content>\n </Popover.Positioner>\n </Portal>\n </Popover.Root>\n );\n};\n\nBitkitPopover.displayName = 'BitkitPopover';\n\nexport default BitkitPopover;\n"],"mappings":";;;;;;;;;;;;;;AA2CA,IAAM,yBAAyB,EAAE,eAAwC;CACvE,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EACA,MAAM,oBAAoB,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe;EAC7F,yBAAyB,CAAC,iBAAiB;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,OAAO,KAAA;EAE9B,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,QAAQ,MAAT;GAAc,KAAK;GAAa;EAAuB,CAAA,GACtD,yBACC,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GAClC,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;GAEA,UAAA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;;;;;;;;;;;AAYA,IAAM,iBAAiB,EACrB,UACA,OACA,QACA,SACA,WACA,MACA,aACA,eACA,cACA,aACA,yBACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,QAAQ,MAAT;EACa;EACX,KAAK,EAAE,OAAO,QAAQ;EAChB;EACO;EACb,WAAA;EACA,cAAc,gBAAgB,EAAE,MAAM,aAAa,aAAa,MAAM,IAAI,KAAA;EAC1E,aAAa;GAAE,WAAW;GAAgB,QAAQ;GAAG,GAAG;EAAY;EAChD;EACpB,eAAA;EATF,UAAA,CAWG,UAAU,oBAAC,QAAQ,SAAT;GAAiB,SAAA;GAAS,UAAA;EAAyB,CAAA,IAAI,MAClE,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GAGjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT;IAAiB,mBAAiB;IAAlC,UAAA;KACE,qBAAC,QAAQ,QAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UAAgB,MAAqB,CAAA,GACrC,oBAAC,QAAQ,cAAT;MAAsB,SAAA;MACpB,UAAA,oBAAC,mBAAD,EAAmB,cAAW,QAAS,CAAA;KACnB,CAAA,CACR,EAAA,CAAA;KAChB,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;KACvD,SAAS,oBAAC,QAAQ,QAAT,EAAA,UAAiB,OAAuB,CAAA,IAAI;IACvC;GACC,CAAA,EAAA,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}
|
|
@@ -65,7 +65,7 @@ var BitkitTagsInput = forwardRef((props, ref) => {
|
|
|
65
65
|
children: /* @__PURE__ */ jsx(BitkitLabel, {
|
|
66
66
|
badge,
|
|
67
67
|
counterText: max !== void 0 ? `${tagValues.length}/${max}` : void 0,
|
|
68
|
-
optional,
|
|
68
|
+
optional: isReadOnly ? false : optional,
|
|
69
69
|
tooltip,
|
|
70
70
|
children: label
|
|
71
71
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitTagsInput.js","names":[],"sources":["../../../lib/components/BitkitTagsInput/BitkitTagsInput.tsx"],"sourcesContent":["import { useControllableState } from '@chakra-ui/react/hooks';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { TagsInput } from '@chakra-ui/react/tags-input';\nimport { forwardRef } from 'react';\n\nimport { IconCross, IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\n// `counterText` is derived from `max`, so it isn't a public prop here.\nexport interface BitkitTagsInputProps extends Omit<BitkitFieldProps, 'children' | 'counterText' | 'state'> {\n addOnPaste?: TagsInput.RootProps['addOnPaste'];\n blurBehavior?: TagsInput.RootProps['blurBehavior'];\n defaultValue?: string[];\n delimiter?: TagsInput.RootProps['delimiter'];\n /**\n * Predicate that marks individual tags as invalid: a tag whose value returns `true` is rendered\n * in the red color set (like BitkitTag `colorVariant=\"red\"`). Unlike `validate` — which gates\n * whether a tag can be *added* — this styles tags that are already in the list (e.g. a pasted\n * or pre-filled value that fails a format check). While any tag is invalid the whole field flips\n * to the error state automatically; pass `errorText` to surface the accompanying message.\n */\n isValueInvalid?: (value: string) => boolean;\n max?: number;\n onValueChange?: TagsInput.RootProps['onValueChange'];\n placeholder?: string;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n validate?: TagsInput.RootProps['validate'];\n value?: string[];\n}\n\nconst rejectEmpty: NonNullable<TagsInput.RootProps['validate']> = ({ inputValue }) => inputValue.trim().length > 0;\n\n/**\n * A field for entering a list of short string tags: type and commit a tag with Enter or a delimiter\n * (comma or whitespace by default); pasting splits on the same delimiter. Tags can be removed one at\n * a time or cleared all at once, and empty/whitespace-only input is rejected. Pass `max` to cap the\n * number of tags — a live counter is then shown next to the label.\n */\nconst BitkitTagsInput = forwardRef<HTMLDivElement, BitkitTagsInputProps>((props, ref) => {\n const {\n addOnPaste = true,\n blurBehavior = 'add',\n defaultValue,\n // Greedy `+` collapses runs of whitespace/commas into a single delimiter so pasting\n // \"alpha, beta\" doesn't spawn an empty tag between the alpha and beta.\n delimiter = /[\\s,]+/,\n isValueInvalid,\n max,\n onValueChange,\n placeholder,\n size = 'lg',\n state,\n validate,\n value,\n // Label chrome is rendered via TagsInput.Label (see below), not BitkitField, so it\n // associates with TagsInput.Input. Pull these out of the props forwarded to BitkitField.\n badge,\n label,\n optional,\n tooltip,\n ...fieldProps\n } = props;\n\n // Always reject empty/whitespace-only input (covers leading/trailing delimiters on paste\n // and blurBehavior=\"add\" with an empty input). Chain with a user-supplied validate if any.\n const effectiveValidate: NonNullable<TagsInput.RootProps['validate']> = (details) =>\n rejectEmpty(details) && (validate?.(details) ?? true);\n\n const styles = useSlotRecipe({ key: 'tagsInput' })({ size });\n\n const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n value,\n defaultValue: defaultValue ?? [],\n });\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n const effectiveState = hasInvalidValue ? 'error' : state;\n const handleValueChange: NonNullable<TagsInput.RootProps['onValueChange']> = (details) => {\n setCurrentValues(details.value);\n onValueChange?.(details);\n };\n\n const hasWarning = effectiveState === 'warning' || !!fieldProps.warningText;\n const isInvalid = effectiveState === 'error' || !!fieldProps.errorText;\n const isDisabled = effectiveState === 'disabled';\n const isReadOnly = effectiveState === 'readOnly';\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={size === 'lg' ? '24' : '16'} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n }\n\n return (\n <TagsInput.Root\n addOnPaste={addOnPaste}\n blurBehavior={blurBehavior}\n defaultValue={defaultValue}\n delimiter={delimiter}\n disabled={isDisabled}\n invalid={isInvalid}\n max={max}\n onValueChange={handleValueChange}\n readOnly={isReadOnly}\n size={size}\n validate={effectiveValidate}\n value={value}\n >\n <TagsInput.Context>\n {({ value: tagValues }) => (\n // Strip any stray runtime `counterText` (not a public prop) so it can't slip through\n // `fieldProps` into BitkitField and resurrect an orphaned Field.Label; the counter is\n // rendered via TagsInput.Label instead.\n <BitkitField optional={optional} ref={ref} state={effectiveState} {...fieldProps} counterText={undefined}>\n {(!!label || !!badge || max !== undefined) && (\n // Chakra's Field.Label wires htmlFor to the Field machine's control, which the\n // TagsInput input never claims (separate Ark machine). TagsInput.Label is the\n // documented composition — it associates with TagsInput.Input.\n <TagsInput.Label asChild>\n <BitkitLabel\n badge={badge}\n counterText={max !== undefined ? `${tagValues.length}/${max}` : undefined}\n optional={optional}\n tooltip={tooltip}\n >\n {label}\n </BitkitLabel>\n </TagsInput.Label>\n )}\n <TagsInput.Control>\n <chakra.div css={styles.tagsBlock}>\n {tagValues.map((tagValue, index) => (\n <TagsInput.Item index={index} key={tagValue} value={tagValue}>\n <TagsInput.ItemPreview data-invalid={(hasInvalidValue && isValueInvalid?.(tagValue)) || undefined}>\n <TagsInput.ItemText>{tagValue}</TagsInput.ItemText>\n {!isReadOnly && (\n <TagsInput.ItemDeleteTrigger>\n <IconCross size=\"16\" />\n </TagsInput.ItemDeleteTrigger>\n )}\n </TagsInput.ItemPreview>\n <TagsInput.ItemInput />\n </TagsInput.Item>\n ))}\n <TagsInput.Input placeholder={placeholder} />\n </chakra.div>\n {(statusIcon || (tagValues.length > 0 && !isDisabled && !isReadOnly)) && (\n <chakra.div css={styles.suffixBlock}>\n {statusIcon}\n {tagValues.length > 0 && !isDisabled && !isReadOnly && (\n <TagsInput.ClearTrigger css={styles.clearTrigger}>\n <IconCross size={size === 'lg' ? '24' : '16'} />\n </TagsInput.ClearTrigger>\n )}\n </chakra.div>\n )}\n </TagsInput.Control>\n <TagsInput.HiddenInput />\n </BitkitField>\n )}\n </TagsInput.Context>\n </TagsInput.Root>\n );\n});\n\nBitkitTagsInput.displayName = 'BitkitTagsInput';\nexport default BitkitTagsInput;\n"],"mappings":";;;;;;;;;;;AAgCA,IAAM,eAA6D,EAAE,iBAAiB,WAAW,KAAK,CAAC,CAAC,SAAS;;;;;;;AAQjH,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,aAAa,MACb,eAAe,OACf,cAGA,YAAY,UACZ,gBACA,KACA,eACA,aACA,OAAO,MACP,OACA,UACA,OAGA,OACA,OACA,UACA,SACA,GAAG,eACD;CAIJ,MAAM,qBAAmE,YACvE,YAAY,OAAO,MAAM,WAAW,OAAO,KAAK;CAElD,MAAM,SAAS,cAAc,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;CAE3D,MAAM,CAAC,eAAe,oBAAoB,qBAAoC;EAC5E;EACA,cAAc,gBAAgB,CAAC;CACjC,CAAC;CAED,MAAM,kBADgB,UAAU,cAAc,UAAU,cACf,CAAC,CAAC,kBAAkB,cAAc,KAAK,cAAc;CAC9F,MAAM,iBAAiB,kBAAkB,UAAU;CACnD,MAAM,qBAAwE,YAAY;EACxF,iBAAiB,QAAQ,KAAK;EAC9B,gBAAgB,OAAO;CACzB;CAEA,MAAM,aAAa,mBAAmB,aAAa,CAAC,CAAC,WAAW;CAChE,MAAM,YAAY,mBAAmB,WAAW,CAAC,CAAC,WAAW;CAC7D,MAAM,aAAa,mBAAmB;CACtC,MAAM,aAAa,mBAAmB;CAEtC,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,OAAM;EAAgB,MAAM,SAAS,OAAO,OAAO;CAAO,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAGtE,OACE,oBAAC,UAAU,MAAX;EACc;EACE;EACA;EACH;EACX,UAAU;EACV,SAAS;EACJ;EACL,eAAe;EACf,UAAU;EACJ;EACN,UAAU;EACH;EAEP,UAAA,oBAAC,UAAU,SAAX,EAAA,WACI,EAAE,OAAO,gBAIT,qBAAC,aAAD;GAAuB;GAAe;GAAK,OAAO;GAAgB,GAAI;GAAY,aAAa,KAAA;GAA/F,UAAA;KACI,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,QAAQ,KAAA,MAI9B,oBAAC,UAAU,OAAX;KAAiB,SAAA;KACf,UAAA,oBAAC,aAAD;MACS;MACP,aAAa,QAAQ,KAAA,IAAY,GAAG,UAAU,OAAO,GAAG,QAAQ,KAAA;
|
|
1
|
+
{"version":3,"file":"BitkitTagsInput.js","names":[],"sources":["../../../lib/components/BitkitTagsInput/BitkitTagsInput.tsx"],"sourcesContent":["import { useControllableState } from '@chakra-ui/react/hooks';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { TagsInput } from '@chakra-ui/react/tags-input';\nimport { forwardRef } from 'react';\n\nimport { IconCross, IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitLabel from '../BitkitLabel/BitkitLabel';\n\n// `counterText` is derived from `max`, so it isn't a public prop here.\nexport interface BitkitTagsInputProps extends Omit<BitkitFieldProps, 'children' | 'counterText' | 'state'> {\n addOnPaste?: TagsInput.RootProps['addOnPaste'];\n blurBehavior?: TagsInput.RootProps['blurBehavior'];\n defaultValue?: string[];\n delimiter?: TagsInput.RootProps['delimiter'];\n /**\n * Predicate that marks individual tags as invalid: a tag whose value returns `true` is rendered\n * in the red color set (like BitkitTag `colorVariant=\"red\"`). Unlike `validate` — which gates\n * whether a tag can be *added* — this styles tags that are already in the list (e.g. a pasted\n * or pre-filled value that fails a format check). While any tag is invalid the whole field flips\n * to the error state automatically; pass `errorText` to surface the accompanying message.\n */\n isValueInvalid?: (value: string) => boolean;\n max?: number;\n onValueChange?: TagsInput.RootProps['onValueChange'];\n placeholder?: string;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n validate?: TagsInput.RootProps['validate'];\n value?: string[];\n}\n\nconst rejectEmpty: NonNullable<TagsInput.RootProps['validate']> = ({ inputValue }) => inputValue.trim().length > 0;\n\n/**\n * A field for entering a list of short string tags: type and commit a tag with Enter or a delimiter\n * (comma or whitespace by default); pasting splits on the same delimiter. Tags can be removed one at\n * a time or cleared all at once, and empty/whitespace-only input is rejected. Pass `max` to cap the\n * number of tags — a live counter is then shown next to the label.\n */\nconst BitkitTagsInput = forwardRef<HTMLDivElement, BitkitTagsInputProps>((props, ref) => {\n const {\n addOnPaste = true,\n blurBehavior = 'add',\n defaultValue,\n // Greedy `+` collapses runs of whitespace/commas into a single delimiter so pasting\n // \"alpha, beta\" doesn't spawn an empty tag between the alpha and beta.\n delimiter = /[\\s,]+/,\n isValueInvalid,\n max,\n onValueChange,\n placeholder,\n size = 'lg',\n state,\n validate,\n value,\n // Label chrome is rendered via TagsInput.Label (see below), not BitkitField, so it\n // associates with TagsInput.Input. Pull these out of the props forwarded to BitkitField.\n badge,\n label,\n optional,\n tooltip,\n ...fieldProps\n } = props;\n\n // Always reject empty/whitespace-only input (covers leading/trailing delimiters on paste\n // and blurBehavior=\"add\" with an empty input). Chain with a user-supplied validate if any.\n const effectiveValidate: NonNullable<TagsInput.RootProps['validate']> = (details) =>\n rejectEmpty(details) && (validate?.(details) ?? true);\n\n const styles = useSlotRecipe({ key: 'tagsInput' })({ size });\n\n const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n value,\n defaultValue: defaultValue ?? [],\n });\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n const effectiveState = hasInvalidValue ? 'error' : state;\n const handleValueChange: NonNullable<TagsInput.RootProps['onValueChange']> = (details) => {\n setCurrentValues(details.value);\n onValueChange?.(details);\n };\n\n const hasWarning = effectiveState === 'warning' || !!fieldProps.warningText;\n const isInvalid = effectiveState === 'error' || !!fieldProps.errorText;\n const isDisabled = effectiveState === 'disabled';\n const isReadOnly = effectiveState === 'readOnly';\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={size === 'lg' ? '24' : '16'} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n }\n\n return (\n <TagsInput.Root\n addOnPaste={addOnPaste}\n blurBehavior={blurBehavior}\n defaultValue={defaultValue}\n delimiter={delimiter}\n disabled={isDisabled}\n invalid={isInvalid}\n max={max}\n onValueChange={handleValueChange}\n readOnly={isReadOnly}\n size={size}\n validate={effectiveValidate}\n value={value}\n >\n <TagsInput.Context>\n {({ value: tagValues }) => (\n // Strip any stray runtime `counterText` (not a public prop) so it can't slip through\n // `fieldProps` into BitkitField and resurrect an orphaned Field.Label; the counter is\n // rendered via TagsInput.Label instead.\n <BitkitField optional={optional} ref={ref} state={effectiveState} {...fieldProps} counterText={undefined}>\n {(!!label || !!badge || max !== undefined) && (\n // Chakra's Field.Label wires htmlFor to the Field machine's control, which the\n // TagsInput input never claims (separate Ark machine). TagsInput.Label is the\n // documented composition — it associates with TagsInput.Input.\n <TagsInput.Label asChild>\n <BitkitLabel\n badge={badge}\n counterText={max !== undefined ? `${tagValues.length}/${max}` : undefined}\n optional={isReadOnly ? false : optional}\n tooltip={tooltip}\n >\n {label}\n </BitkitLabel>\n </TagsInput.Label>\n )}\n <TagsInput.Control>\n <chakra.div css={styles.tagsBlock}>\n {tagValues.map((tagValue, index) => (\n <TagsInput.Item index={index} key={tagValue} value={tagValue}>\n <TagsInput.ItemPreview data-invalid={(hasInvalidValue && isValueInvalid?.(tagValue)) || undefined}>\n <TagsInput.ItemText>{tagValue}</TagsInput.ItemText>\n {!isReadOnly && (\n <TagsInput.ItemDeleteTrigger>\n <IconCross size=\"16\" />\n </TagsInput.ItemDeleteTrigger>\n )}\n </TagsInput.ItemPreview>\n <TagsInput.ItemInput />\n </TagsInput.Item>\n ))}\n <TagsInput.Input placeholder={placeholder} />\n </chakra.div>\n {(statusIcon || (tagValues.length > 0 && !isDisabled && !isReadOnly)) && (\n <chakra.div css={styles.suffixBlock}>\n {statusIcon}\n {tagValues.length > 0 && !isDisabled && !isReadOnly && (\n <TagsInput.ClearTrigger css={styles.clearTrigger}>\n <IconCross size={size === 'lg' ? '24' : '16'} />\n </TagsInput.ClearTrigger>\n )}\n </chakra.div>\n )}\n </TagsInput.Control>\n <TagsInput.HiddenInput />\n </BitkitField>\n )}\n </TagsInput.Context>\n </TagsInput.Root>\n );\n});\n\nBitkitTagsInput.displayName = 'BitkitTagsInput';\nexport default BitkitTagsInput;\n"],"mappings":"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"}
|