@plexui/ui 0.7.23 → 0.7.25
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.
|
@@ -5,7 +5,8 @@ import { useEffect, useRef, useState } from "react";
|
|
|
5
5
|
import { mergeRefs } from "react-merge-refs";
|
|
6
6
|
import { useResizeObserver } from "usehooks-ts";
|
|
7
7
|
import {} from "../../types";
|
|
8
|
-
import { CheckCircle, Info, Warning
|
|
8
|
+
import { CheckCircle, Info, Warning } from "../Icon";
|
|
9
|
+
import { Button } from "../Button";
|
|
9
10
|
import s from "./Alert.module.css";
|
|
10
11
|
export const Alert = ({ color = "primary", variant = "outline", title, description, actions, actionsPlacement, indicator, className, actionsClassName, onDismiss, ref, ...restProps }) => {
|
|
11
12
|
const containerRef = useRef(null);
|
|
@@ -21,7 +22,7 @@ export const Alert = ({ color = "primary", variant = "outline", title, descripti
|
|
|
21
22
|
setActionsAutoPlacement(placement);
|
|
22
23
|
}
|
|
23
24
|
}, [containerWidth]);
|
|
24
|
-
return (_jsxs("div", { ref: mergeRefs([ref, containerRef]), className: clsx(s.Alert, className), "data-variant": variant, "data-color": color, role: color === "danger" ? "alert" : undefined, "data-actions-placement": actionsPlacement ?? actionsAutoPlacement, ...restProps, children: [indicator === false ? null : (_jsx("div", { className: s.Indicator, children: indicator ?? _jsx(Indicator, { color: color }) })), _jsxs("div", { className: s.Content, children: [_jsxs("div", { className: s.Message, children: [title && _jsx("div", { className: s.Title, children: title }), description && _jsx("div", { className: s.Description, children: description })] }), actions && (
|
|
25
|
+
return (_jsxs("div", { ref: mergeRefs([ref, containerRef]), className: clsx(s.Alert, className), "data-variant": variant, "data-color": color, role: color === "danger" ? "alert" : undefined, "data-actions-placement": actionsPlacement ?? actionsAutoPlacement, ...restProps, children: [indicator === false ? null : (_jsx("div", { className: s.Indicator, children: indicator ?? _jsx(Indicator, { color: color }) })), _jsxs("div", { className: s.Content, children: [_jsxs("div", { className: s.Message, children: [title && _jsx("div", { className: s.Title, children: title }), description && _jsx("div", { className: s.Description, children: description })] }), (actions || onDismiss) && (_jsxs("div", { className: clsx(s.Actions, actionsClassName), ref: actionsRef, children: [actions, onDismiss && (_jsx(Button, { type: "button", onClick: onDismiss, color: color, variant: "soft", pill: true, children: "Dismiss" }))] }))] })] }));
|
|
25
26
|
};
|
|
26
27
|
export const Indicator = ({ color }) => {
|
|
27
28
|
// Choose a default icon based on the color (which signals intention)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAA4B,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAsC,MAAM,aAAa,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ReactNode, type Ref, useEffect, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { useResizeObserver } from \"usehooks-ts\"\nimport { type SemanticColors, type Variants } from \"../../types\"\nimport { CheckCircle, Info, Warning } from \"../Icon\"\nimport { Button } from \"../Button\"\nimport s from \"./Alert.module.css\"\n\nexport type AlertProps = {\n /**\n * Color for the button\n * @default primary\n */\n color?: SemanticColors<\n \"primary\" | \"danger\" | \"success\" | \"info\" | \"discovery\" | \"caution\" | \"warning\"\n >\n /**\n * Style variant for the Button\n * @default fill\n */\n variant?: Variants<\"solid\" | \"soft\" | \"outline\">\n /** Title displayed in the alert. */\n title?: ReactNode\n /** Description text displayed in the alert */\n description?: ReactNode\n /** Actions associated with the Alert. */\n actions?: ReactNode\n /** Sets the placement of `actions` always on the end or the bottom. Default behavior is automatic placement based on sizing. */\n actionsPlacement?: \"end\" | \"bottom\"\n /** Optional override for the default indicator of the alert. When `false`, no indicator is shown. */\n indicator?: ReactNode | false\n /** Class applied to the alert container */\n className?: string\n /** Class applied to the actions container */\n actionsClassName?: string\n /** Callback when dismiss button is clicked. Shows dismiss button when provided. */\n onDismiss?: () => void\n /** Ref applied to the alert container */\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Alert = ({\n color = \"primary\",\n variant = \"outline\",\n title,\n description,\n actions,\n actionsPlacement,\n indicator,\n className,\n actionsClassName,\n onDismiss,\n ref,\n ...restProps\n}: AlertProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const actionsRef = useRef<HTMLDivElement>(null)\n const [actionsAutoPlacement, setActionsAutoPlacement] = useState<\"end\" | \"bottom\">(\"end\")\n // @ts-expect-error -- Type issue in usehooks-ts\n const { width: containerWidth } = useResizeObserver({ ref: containerRef })\n\n useEffect(() => {\n const actionsWidth = actionsRef.current?.clientWidth ?? 0\n\n if (actionsWidth && containerWidth) {\n // If actions are larger than a third of the container width, wrap them.\n const placement = actionsWidth > containerWidth / 3 ? \"bottom\" : \"end\"\n setActionsAutoPlacement(placement)\n }\n }, [containerWidth])\n\n return (\n <div\n ref={mergeRefs([ref, containerRef])}\n className={clsx(s.Alert, className)}\n data-variant={variant}\n data-color={color}\n role={color === \"danger\" ? \"alert\" : undefined}\n data-actions-placement={actionsPlacement ?? actionsAutoPlacement}\n {...restProps}\n >\n {indicator === false ? null : (\n <div className={s.Indicator}>{indicator ?? <Indicator color={color} />}</div>\n )}\n <div className={s.Content}>\n <div className={s.Message}>\n {title && <div className={s.Title}>{title}</div>}\n {description && <div className={s.Description}>{description}</div>}\n </div>\n {(actions || onDismiss) && (\n <div className={clsx(s.Actions, actionsClassName)} ref={actionsRef}>\n {actions}\n {onDismiss && (\n <Button type=\"button\" onClick={onDismiss} color={color} variant=\"soft\" pill>\n Dismiss\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport const Indicator = ({ color }: { color: AlertProps[\"color\"] }) => {\n // Choose a default icon based on the color (which signals intention)\n switch (color) {\n case \"warning\":\n case \"caution\":\n case \"danger\":\n return <Warning />\n case \"success\":\n return <CheckCircle />\n default:\n return <Info />\n }\n}\n"]}
|
|
@@ -183,28 +183,5 @@
|
|
|
183
183
|
|
|
184
184
|
:where(.Alert[data-actions-placement="bottom"]) .Actions {
|
|
185
185
|
margin-top: var(--alert-gutter);
|
|
186
|
-
}.DismissButton {
|
|
187
|
-
display: flex;
|
|
188
|
-
align-items: center;
|
|
189
|
-
justify-content: center;
|
|
190
|
-
flex-shrink: 0;
|
|
191
|
-
padding: calc(var(--spacing) * 1);
|
|
192
|
-
margin: calc(calc(var(--spacing) * 1) * -1);
|
|
193
|
-
border: none;
|
|
194
|
-
background: transparent;
|
|
195
|
-
color: currentColor;
|
|
196
|
-
opacity: 0.5;
|
|
197
|
-
cursor: pointer;
|
|
198
|
-
border-radius: var(--radius-sm);
|
|
199
|
-
transition: opacity 0.15s;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.DismissButton:hover {
|
|
203
|
-
opacity: 1;
|
|
204
186
|
}
|
|
205
|
-
|
|
206
|
-
.DismissButton svg {
|
|
207
|
-
width: 16px;
|
|
208
|
-
height: 16px;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
187
|
+
}
|
|
@@ -23,4 +23,4 @@ export declare const FloatingLabelSelect: import("react").ForwardRefExoticCompon
|
|
|
23
23
|
children?: React.ReactNode;
|
|
24
24
|
className?: string;
|
|
25
25
|
"aria-describedby"?: string;
|
|
26
|
-
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "
|
|
26
|
+
} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "tabIndex" | "role" | "aria-describedby"> & import("react").RefAttributes<HTMLDivElement>>;
|