@uniformdev/design-system 19.22.0 → 19.23.0
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/esm/index.js +58 -22
- package/dist/index.d.ts +5 -13
- package/dist/index.js +59 -22
- package/package.json +4 -3
package/dist/esm/index.js
CHANGED
|
@@ -65,6 +65,12 @@ var Theme = ({ disableReset = false }) => {
|
|
|
65
65
|
--primary-action-hover: #1264ff;
|
|
66
66
|
--primary-action-active: #0043c2;
|
|
67
67
|
|
|
68
|
+
/* tertiary action */
|
|
69
|
+
--tertiary-action-default: var(--gray-700);
|
|
70
|
+
--tertiary-action-hover: var(--gray-600);
|
|
71
|
+
--tertiary-action-active: var(--gray-50);
|
|
72
|
+
--tertiary-action-disabled: var(--gray-400);
|
|
73
|
+
|
|
68
74
|
/* accent dark */
|
|
69
75
|
--accent-dark: var(--purple-rain-500);
|
|
70
76
|
--accent-dark-hover: var(--purple-rain-400);
|
|
@@ -431,15 +437,41 @@ var buttonGhostDestructive = css`
|
|
|
431
437
|
${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
|
|
432
438
|
`;
|
|
433
439
|
var buttonTertiary = css`
|
|
434
|
-
background: var(--
|
|
440
|
+
background: var(--tertiary-action-default);
|
|
435
441
|
color: var(--white);
|
|
436
442
|
|
|
443
|
+
&:hover {
|
|
444
|
+
background: var(--tertiary-action-hover);
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
&:disabled {
|
|
448
|
+
background: var(--tertiary-action-disabled);
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
&:hover,
|
|
437
452
|
&:disabled {
|
|
438
|
-
background: var(--gray-300);
|
|
439
453
|
color: var(--white);
|
|
440
454
|
}
|
|
441
455
|
|
|
442
|
-
${buttonRippleEffect({ hoverColor: " var(--
|
|
456
|
+
${buttonRippleEffect({ hoverColor: " var(--tertiary-action-default)" })}
|
|
457
|
+
`;
|
|
458
|
+
var buttonTertiaryOutline = css`
|
|
459
|
+
background: transparent;
|
|
460
|
+
box-shadow: 0 0 0 1px var(--tertiary-action-default);
|
|
461
|
+
color: var(--tertiary-action-default);
|
|
462
|
+
|
|
463
|
+
&:hover {
|
|
464
|
+
box-shadow: 0 0 0 1px var(--tertiary-action-hover);
|
|
465
|
+
color: var(--tertiary-action-hover);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
&:disabled {
|
|
469
|
+
background: transparent;
|
|
470
|
+
box-shadow: 0 0 0 1px var(--tertiary-action-disabled);
|
|
471
|
+
color: var(--tertiary-action-disabled);
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
${buttonRippleEffect({ hoverColor: "transparent", activeColor: "var(--tertiary-action-active)" })}
|
|
443
475
|
`;
|
|
444
476
|
var buttonGhostUnimportant = css`
|
|
445
477
|
background: transparent;
|
|
@@ -11085,8 +11117,8 @@ var Button = React5.forwardRef(
|
|
|
11085
11117
|
ghostDestructive: buttonGhostDestructive,
|
|
11086
11118
|
unimportant: buttonUnimportant,
|
|
11087
11119
|
ghostUnimportant: buttonGhostUnimportant,
|
|
11088
|
-
|
|
11089
|
-
|
|
11120
|
+
tertiary: buttonTertiary,
|
|
11121
|
+
tertiaryOutline: buttonTertiaryOutline
|
|
11090
11122
|
};
|
|
11091
11123
|
const btnSize = {
|
|
11092
11124
|
zero: "padding: 0",
|
|
@@ -12468,6 +12500,9 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
|
|
|
12468
12500
|
return (_a2 = detailsRef.current) == null ? void 0 : _a2.removeEventListener("toggle", toggleEvent);
|
|
12469
12501
|
};
|
|
12470
12502
|
}, [detailsRef]);
|
|
12503
|
+
React9.useEffect(() => {
|
|
12504
|
+
setOpen(isOpenByDefault);
|
|
12505
|
+
}, [isOpenByDefault]);
|
|
12471
12506
|
return /* @__PURE__ */ jsxs21("details", { "data-testid": "details", css: details, open, ref: detailsRef, ...props, children: [
|
|
12472
12507
|
/* @__PURE__ */ jsxs21("summary", { "data-testid": "summary", css: summary, children: [
|
|
12473
12508
|
/* @__PURE__ */ jsx38(
|
|
@@ -15744,11 +15779,8 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
|
|
15744
15779
|
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
|
15745
15780
|
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
|
15746
15781
|
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
|
|
15747
|
-
import { deepEqual as deepEqual2 } from "fast-equals";
|
|
15748
|
-
import { ParagraphNode } from "lexical";
|
|
15749
|
-
import { useEffect as useEffect13, useRef as useRef6 } from "react";
|
|
15750
15782
|
|
|
15751
|
-
//
|
|
15783
|
+
// ../richtext/dist/index.mjs
|
|
15752
15784
|
var richTextBuiltInElements = [
|
|
15753
15785
|
{
|
|
15754
15786
|
label: "Heading 1",
|
|
@@ -15779,7 +15811,7 @@ var richTextBuiltInElements = [
|
|
|
15779
15811
|
type: "unorderedList"
|
|
15780
15812
|
},
|
|
15781
15813
|
{
|
|
15782
|
-
label: "
|
|
15814
|
+
label: "Ordered List",
|
|
15783
15815
|
type: "orderedList"
|
|
15784
15816
|
},
|
|
15785
15817
|
{
|
|
@@ -15795,8 +15827,6 @@ var richTextBuiltInElements = [
|
|
|
15795
15827
|
type: "code"
|
|
15796
15828
|
}
|
|
15797
15829
|
];
|
|
15798
|
-
|
|
15799
|
-
// src/components/ParameterInputs/rich-text/builtInFormats.ts
|
|
15800
15830
|
var richTextBuiltInFormats = [
|
|
15801
15831
|
{
|
|
15802
15832
|
label: "Bold",
|
|
@@ -15827,6 +15857,19 @@ var richTextBuiltInFormats = [
|
|
|
15827
15857
|
type: "subscript"
|
|
15828
15858
|
}
|
|
15829
15859
|
];
|
|
15860
|
+
var getLabelForElement = (type) => {
|
|
15861
|
+
var _a;
|
|
15862
|
+
if (type === "paragraph") {
|
|
15863
|
+
return "Normal";
|
|
15864
|
+
}
|
|
15865
|
+
const element = richTextBuiltInElements.find((element2) => element2.type === type);
|
|
15866
|
+
return (_a = element == null ? void 0 : element.label) != null ? _a : type;
|
|
15867
|
+
};
|
|
15868
|
+
|
|
15869
|
+
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
15870
|
+
import { deepEqual as deepEqual2 } from "fast-equals";
|
|
15871
|
+
import { ParagraphNode } from "lexical";
|
|
15872
|
+
import { useEffect as useEffect13, useRef as useRef6 } from "react";
|
|
15830
15873
|
|
|
15831
15874
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
15832
15875
|
import { css as css71 } from "@emotion/css";
|
|
@@ -16726,14 +16769,6 @@ var RichTextToolbar = ({ config }) => {
|
|
|
16726
16769
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
16727
16770
|
(element) => ["h1", "h2", "h3", "h4", "h5", "h6"].includes(element.type)
|
|
16728
16771
|
);
|
|
16729
|
-
const elementTypeToLabel = (type) => {
|
|
16730
|
-
var _a;
|
|
16731
|
-
if (type === "paragraph") {
|
|
16732
|
-
return "Normal";
|
|
16733
|
-
}
|
|
16734
|
-
const element = richTextBuiltInElements.find((element2) => element2.type === type);
|
|
16735
|
-
return (_a = element == null ? void 0 : element.label) != null ? _a : type;
|
|
16736
|
-
};
|
|
16737
16772
|
const onSelectElement = (type) => {
|
|
16738
16773
|
if (activeElement === type) {
|
|
16739
16774
|
return;
|
|
@@ -16872,7 +16907,7 @@ var RichTextToolbar = ({ config }) => {
|
|
|
16872
16907
|
return [
|
|
16873
16908
|
...enabledTextualElements,
|
|
16874
16909
|
{
|
|
16875
|
-
label:
|
|
16910
|
+
label: getLabelForElement(activeElement),
|
|
16876
16911
|
type: activeElement
|
|
16877
16912
|
}
|
|
16878
16913
|
];
|
|
@@ -16883,7 +16918,7 @@ var RichTextToolbar = ({ config }) => {
|
|
|
16883
16918
|
{
|
|
16884
16919
|
menuLabel: "Elements",
|
|
16885
16920
|
menuTrigger: /* @__PURE__ */ jsxs60("button", { css: toolbarButton, title: "Text formatting", children: [
|
|
16886
|
-
elementsThatShouldBeVisibleInDropdown.some((element) => element.type === activeElement) ?
|
|
16921
|
+
elementsThatShouldBeVisibleInDropdown.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
16887
16922
|
" ",
|
|
16888
16923
|
/* @__PURE__ */ jsx92(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
16889
16924
|
] }),
|
|
@@ -18144,6 +18179,7 @@ export {
|
|
|
18144
18179
|
buttonSecondary,
|
|
18145
18180
|
buttonSecondaryInvert,
|
|
18146
18181
|
buttonTertiary,
|
|
18182
|
+
buttonTertiaryOutline,
|
|
18147
18183
|
buttonUnimportant,
|
|
18148
18184
|
canvasAlertIcon,
|
|
18149
18185
|
cardIcon,
|
package/dist/index.d.ts
CHANGED
|
@@ -15,12 +15,13 @@ import InternalSelect from 'react-select/dist/declarations/src/Select';
|
|
|
15
15
|
import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
|
|
16
16
|
import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
|
|
17
17
|
import { MenuHTMLProps, MenuProps as MenuProps$2, MenuStateReturn } from 'reakit/Menu';
|
|
18
|
-
import {
|
|
18
|
+
import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
|
|
19
19
|
export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
|
|
20
20
|
import { Spread, SerializedElementNode, ElementNode, NodeKey, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
|
|
21
21
|
import { PopoverProps as PopoverProps$1, PopoverInitialState } from 'reakit/Popover';
|
|
22
22
|
import { TabState, TabListProps, TabProps, TabPanelProps } from 'reakit/Tab';
|
|
23
23
|
import { TooltipOptions, TooltipInitialState } from 'reakit/Tooltip';
|
|
24
|
+
export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/richtext';
|
|
24
25
|
|
|
25
26
|
/** @todo: line 144 onwards will be brought into a title, paragraph, list and link components */
|
|
26
27
|
type ThemeProps = {
|
|
@@ -88,6 +89,7 @@ declare const buttonUnimportant: _emotion_react.SerializedStyles;
|
|
|
88
89
|
declare const buttonGhost: _emotion_react.SerializedStyles;
|
|
89
90
|
declare const buttonGhostDestructive: _emotion_react.SerializedStyles;
|
|
90
91
|
declare const buttonTertiary: _emotion_react.SerializedStyles;
|
|
92
|
+
declare const buttonTertiaryOutline: _emotion_react.SerializedStyles;
|
|
91
93
|
declare const buttonGhostUnimportant: _emotion_react.SerializedStyles;
|
|
92
94
|
|
|
93
95
|
declare const labelText: _emotion_react.SerializedStyles;
|
|
@@ -20245,7 +20247,7 @@ declare const UniformLogo: ({ theme, ...props }: UniformLogoProps & React.SVGAtt
|
|
|
20245
20247
|
declare const UniformLogoLarge: ({ ...props }: React.SVGAttributes<SVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
20246
20248
|
|
|
20247
20249
|
/** Button themes that are available to use with our brand */
|
|
20248
|
-
type ButtonThemeProps$1 = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
|
|
20250
|
+
type ButtonThemeProps$1 = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'tertiaryOutline' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert' | 'ghostUnimportant';
|
|
20249
20251
|
/** Button sizes that are available to use with our brand */
|
|
20250
20252
|
type ButtonSizeProps = 'zero' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
20251
20253
|
type ButtonProps = ButtonProps$1 & {
|
|
@@ -21518,16 +21520,6 @@ type ParameterNameAndPublicIdInputProps = {
|
|
|
21518
21520
|
/** @example <ParameterNameAndPublicIdInput /> */
|
|
21519
21521
|
declare const ParameterNameAndPublicIdInput: ({ id, onBlur, autoFocus, onNameChange, onPublicIdChange, nameIdError, publicIdError, readOnly, hasInitialPublicIdField, label, warnOverLength, nameIdField, nameCaption, namePlaceholderText, publicIdFieldName, publicIdCaption, publicIdPlaceholderText, values, }: ParameterNameAndPublicIdInputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
21520
21522
|
|
|
21521
|
-
declare const richTextBuiltInElements: {
|
|
21522
|
-
label: string;
|
|
21523
|
-
type: RichTextBuiltInElement;
|
|
21524
|
-
}[];
|
|
21525
|
-
|
|
21526
|
-
declare const richTextBuiltInFormats: {
|
|
21527
|
-
label: string;
|
|
21528
|
-
type: RichTextBuiltInFormat;
|
|
21529
|
-
}[];
|
|
21530
|
-
|
|
21531
21523
|
type LinkNodeProps = NonNullable<LinkParamValue>;
|
|
21532
21524
|
type SerializedLinkNode = Spread<{
|
|
21533
21525
|
link: LinkNodeProps;
|
|
@@ -22187,4 +22179,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
|
|
|
22187
22179
|
};
|
|
22188
22180
|
declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
22189
22181
|
|
|
22190
|
-
export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RichTextParamValue, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, borderTopIcon, breakpoints, button, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString,
|
|
22182
|
+
export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, BadgeSizeProps, BadgeThemeProps, BadgeThemeStyleProps, Banner, BannerProps, BannerType, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CardTitle, CardTitleProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, Chip, ChipProps, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, DismissibleChipAction, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InfoMessage, InfoMessageProps, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkNode, LinkProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextInnerProps, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, RichTextParamValue, ScrollableItemProps, ScrollableList, ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, SerializedLinkNode, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, SuccessMessage, SuccessMessageProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, Tile, TileContainer, TileContainerProps, TileProps, TileText, TileTitleProps, Tooltip, TooltipProps, TwoColumnLayout, TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, UniformLogoProps, UseShortcutOptions, VerticalRhythm, WarningMessage, WarningMessageProps, accessibleHidden, borderTopIcon, breakpoints, button, buttonDestructive, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, cq, customIcons, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isMacLike, jsonIcon, labelText, loader as loaderAnimationData, macifyShortcut, mq, numberInput, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextIsValueConsideredEmpty, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInTtb, spinner as spinnerAnimationData, structurePanelIcon, supports, textInput, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawerRenderer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut, warningIcon, yesNoIcon };
|
package/dist/index.js
CHANGED
|
@@ -170,6 +170,7 @@ __export(src_exports, {
|
|
|
170
170
|
buttonSecondary: () => buttonSecondary,
|
|
171
171
|
buttonSecondaryInvert: () => buttonSecondaryInvert,
|
|
172
172
|
buttonTertiary: () => buttonTertiary,
|
|
173
|
+
buttonTertiaryOutline: () => buttonTertiaryOutline,
|
|
173
174
|
buttonUnimportant: () => buttonUnimportant,
|
|
174
175
|
canvasAlertIcon: () => canvasAlertIcon,
|
|
175
176
|
cardIcon: () => cardIcon,
|
|
@@ -294,6 +295,12 @@ var Theme = ({ disableReset = false }) => {
|
|
|
294
295
|
--primary-action-hover: #1264ff;
|
|
295
296
|
--primary-action-active: #0043c2;
|
|
296
297
|
|
|
298
|
+
/* tertiary action */
|
|
299
|
+
--tertiary-action-default: var(--gray-700);
|
|
300
|
+
--tertiary-action-hover: var(--gray-600);
|
|
301
|
+
--tertiary-action-active: var(--gray-50);
|
|
302
|
+
--tertiary-action-disabled: var(--gray-400);
|
|
303
|
+
|
|
297
304
|
/* accent dark */
|
|
298
305
|
--accent-dark: var(--purple-rain-500);
|
|
299
306
|
--accent-dark-hover: var(--purple-rain-400);
|
|
@@ -660,15 +667,41 @@ var buttonGhostDestructive = import_react3.css`
|
|
|
660
667
|
${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
|
|
661
668
|
`;
|
|
662
669
|
var buttonTertiary = import_react3.css`
|
|
663
|
-
background: var(--
|
|
670
|
+
background: var(--tertiary-action-default);
|
|
664
671
|
color: var(--white);
|
|
665
672
|
|
|
673
|
+
&:hover {
|
|
674
|
+
background: var(--tertiary-action-hover);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
&:disabled {
|
|
678
|
+
background: var(--tertiary-action-disabled);
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
&:hover,
|
|
666
682
|
&:disabled {
|
|
667
|
-
background: var(--gray-300);
|
|
668
683
|
color: var(--white);
|
|
669
684
|
}
|
|
670
685
|
|
|
671
|
-
${buttonRippleEffect({ hoverColor: " var(--
|
|
686
|
+
${buttonRippleEffect({ hoverColor: " var(--tertiary-action-default)" })}
|
|
687
|
+
`;
|
|
688
|
+
var buttonTertiaryOutline = import_react3.css`
|
|
689
|
+
background: transparent;
|
|
690
|
+
box-shadow: 0 0 0 1px var(--tertiary-action-default);
|
|
691
|
+
color: var(--tertiary-action-default);
|
|
692
|
+
|
|
693
|
+
&:hover {
|
|
694
|
+
box-shadow: 0 0 0 1px var(--tertiary-action-hover);
|
|
695
|
+
color: var(--tertiary-action-hover);
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
&:disabled {
|
|
699
|
+
background: transparent;
|
|
700
|
+
box-shadow: 0 0 0 1px var(--tertiary-action-disabled);
|
|
701
|
+
color: var(--tertiary-action-disabled);
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
${buttonRippleEffect({ hoverColor: "transparent", activeColor: "var(--tertiary-action-active)" })}
|
|
672
705
|
`;
|
|
673
706
|
var buttonGhostUnimportant = import_react3.css`
|
|
674
707
|
background: transparent;
|
|
@@ -11314,8 +11347,8 @@ var Button = React5.forwardRef(
|
|
|
11314
11347
|
ghostDestructive: buttonGhostDestructive,
|
|
11315
11348
|
unimportant: buttonUnimportant,
|
|
11316
11349
|
ghostUnimportant: buttonGhostUnimportant,
|
|
11317
|
-
|
|
11318
|
-
|
|
11350
|
+
tertiary: buttonTertiary,
|
|
11351
|
+
tertiaryOutline: buttonTertiaryOutline
|
|
11319
11352
|
};
|
|
11320
11353
|
const btnSize = {
|
|
11321
11354
|
zero: "padding: 0",
|
|
@@ -12693,6 +12726,9 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
|
|
|
12693
12726
|
return (_a2 = detailsRef.current) == null ? void 0 : _a2.removeEventListener("toggle", toggleEvent);
|
|
12694
12727
|
};
|
|
12695
12728
|
}, [detailsRef]);
|
|
12729
|
+
React9.useEffect(() => {
|
|
12730
|
+
setOpen(isOpenByDefault);
|
|
12731
|
+
}, [isOpenByDefault]);
|
|
12696
12732
|
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("details", { "data-testid": "details", css: details, open, ref: detailsRef, ...props, children: [
|
|
12697
12733
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("summary", { "data-testid": "summary", css: summary, children: [
|
|
12698
12734
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
@@ -15956,11 +15992,8 @@ var import_LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
|
|
|
15956
15992
|
var import_LexicalMarkdownShortcutPlugin = require("@lexical/react/LexicalMarkdownShortcutPlugin");
|
|
15957
15993
|
var import_LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
|
|
15958
15994
|
var import_rich_text2 = require("@lexical/rich-text");
|
|
15959
|
-
var import_fast_equals2 = require("fast-equals");
|
|
15960
|
-
var import_lexical5 = require("lexical");
|
|
15961
|
-
var import_react102 = require("react");
|
|
15962
15995
|
|
|
15963
|
-
//
|
|
15996
|
+
// ../richtext/dist/index.mjs
|
|
15964
15997
|
var richTextBuiltInElements = [
|
|
15965
15998
|
{
|
|
15966
15999
|
label: "Heading 1",
|
|
@@ -15991,7 +16024,7 @@ var richTextBuiltInElements = [
|
|
|
15991
16024
|
type: "unorderedList"
|
|
15992
16025
|
},
|
|
15993
16026
|
{
|
|
15994
|
-
label: "
|
|
16027
|
+
label: "Ordered List",
|
|
15995
16028
|
type: "orderedList"
|
|
15996
16029
|
},
|
|
15997
16030
|
{
|
|
@@ -16007,8 +16040,6 @@ var richTextBuiltInElements = [
|
|
|
16007
16040
|
type: "code"
|
|
16008
16041
|
}
|
|
16009
16042
|
];
|
|
16010
|
-
|
|
16011
|
-
// src/components/ParameterInputs/rich-text/builtInFormats.ts
|
|
16012
16043
|
var richTextBuiltInFormats = [
|
|
16013
16044
|
{
|
|
16014
16045
|
label: "Bold",
|
|
@@ -16039,6 +16070,19 @@ var richTextBuiltInFormats = [
|
|
|
16039
16070
|
type: "subscript"
|
|
16040
16071
|
}
|
|
16041
16072
|
];
|
|
16073
|
+
var getLabelForElement = (type) => {
|
|
16074
|
+
var _a;
|
|
16075
|
+
if (type === "paragraph") {
|
|
16076
|
+
return "Normal";
|
|
16077
|
+
}
|
|
16078
|
+
const element = richTextBuiltInElements.find((element2) => element2.type === type);
|
|
16079
|
+
return (_a = element == null ? void 0 : element.label) != null ? _a : type;
|
|
16080
|
+
};
|
|
16081
|
+
|
|
16082
|
+
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
16083
|
+
var import_fast_equals2 = require("fast-equals");
|
|
16084
|
+
var import_lexical5 = require("lexical");
|
|
16085
|
+
var import_react102 = require("react");
|
|
16042
16086
|
|
|
16043
16087
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
16044
16088
|
var import_css = require("@emotion/css");
|
|
@@ -16897,14 +16941,6 @@ var RichTextToolbar = ({ config }) => {
|
|
|
16897
16941
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
16898
16942
|
(element) => ["h1", "h2", "h3", "h4", "h5", "h6"].includes(element.type)
|
|
16899
16943
|
);
|
|
16900
|
-
const elementTypeToLabel = (type) => {
|
|
16901
|
-
var _a;
|
|
16902
|
-
if (type === "paragraph") {
|
|
16903
|
-
return "Normal";
|
|
16904
|
-
}
|
|
16905
|
-
const element = richTextBuiltInElements.find((element2) => element2.type === type);
|
|
16906
|
-
return (_a = element == null ? void 0 : element.label) != null ? _a : type;
|
|
16907
|
-
};
|
|
16908
16944
|
const onSelectElement = (type) => {
|
|
16909
16945
|
if (activeElement === type) {
|
|
16910
16946
|
return;
|
|
@@ -17043,7 +17079,7 @@ var RichTextToolbar = ({ config }) => {
|
|
|
17043
17079
|
return [
|
|
17044
17080
|
...enabledTextualElements,
|
|
17045
17081
|
{
|
|
17046
|
-
label:
|
|
17082
|
+
label: getLabelForElement(activeElement),
|
|
17047
17083
|
type: activeElement
|
|
17048
17084
|
}
|
|
17049
17085
|
];
|
|
@@ -17054,7 +17090,7 @@ var RichTextToolbar = ({ config }) => {
|
|
|
17054
17090
|
{
|
|
17055
17091
|
menuLabel: "Elements",
|
|
17056
17092
|
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("button", { css: toolbarButton, title: "Text formatting", children: [
|
|
17057
|
-
elementsThatShouldBeVisibleInDropdown.some((element) => element.type === activeElement) ?
|
|
17093
|
+
elementsThatShouldBeVisibleInDropdown.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
17058
17094
|
" ",
|
|
17059
17095
|
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
17060
17096
|
] }),
|
|
@@ -18307,6 +18343,7 @@ var StatusBullet = ({
|
|
|
18307
18343
|
buttonSecondary,
|
|
18308
18344
|
buttonSecondaryInvert,
|
|
18309
18345
|
buttonTertiary,
|
|
18346
|
+
buttonTertiaryOutline,
|
|
18310
18347
|
buttonUnimportant,
|
|
18311
18348
|
canvasAlertIcon,
|
|
18312
18349
|
cardIcon,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/design-system",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.23.0",
|
|
4
4
|
"description": "Uniform design system components",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
"@storybook/client-api": "6.5.16",
|
|
24
24
|
"@storybook/react": "6.5.16",
|
|
25
25
|
"@types/react": "18.2.7",
|
|
26
|
-
"@uniformdev/canvas": "^19.
|
|
26
|
+
"@uniformdev/canvas": "^19.23.0",
|
|
27
|
+
"@uniformdev/richtext": "^19.23.0",
|
|
27
28
|
"autoprefixer": "10.4.14",
|
|
28
29
|
"hygen": "6.2.11",
|
|
29
30
|
"postcss": "8.4.24",
|
|
@@ -66,5 +67,5 @@
|
|
|
66
67
|
"publishConfig": {
|
|
67
68
|
"access": "public"
|
|
68
69
|
},
|
|
69
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "35c696a78e1909a73bc290663603d015927bbe28"
|
|
70
71
|
}
|