@indico-data/design-system 1.0.51 → 1.0.52

package/.eslintrc.js

@@ -8,6 +8,11 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
   ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
   overrides: [
     {
       env: {

package/lib/components/dropdowns/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ComboboxProps = {
     'aria-label'?: string;
     'aria-labelledby'?: string;

package/lib/components/index.d.ts

@@ -13,3 +13,4 @@ export { LoadingAwareContainer } from './LoadingAwareContainer';
 export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
 export { WizardWithSidebar } from './WizardWithSidebar';
 export { Drawer } from './Navigation/Drawer';
+export { TextTruncate } from './text-truncate';

package/lib/components/inputs/RadioButtons/RadioButtons.d.ts

@@ -9,6 +9,7 @@ type Props = {
     labelColor: string;
     hoverAndSelectedColor: string;
     focusRingColor: string;
+    value: string;
 } & RadioGroupProps & PermafrostComponent;
 /**
  * Renders a group of radio buttons.

package/lib/index.d.ts

@@ -365,6 +365,7 @@ declare const allColors: {
     readonly flamingo: "#f861b6";
     readonly flirt: "#910870";
     readonly forestGreen: "#1f7f1f";
+    readonly frostedOver: "#DCEAFD";
     readonly geraldine: "#fe9486";
     readonly grannysmith: "#92e959";
     readonly green: "#4caf50";
@@ -748,6 +749,7 @@ type Props$c = {
     labelColor: string;
     hoverAndSelectedColor: string;
     focusRingColor: string;
+    value: string;
 } & RadioGroupProps$1 & PermafrostComponent;
 /**
  * Renders a group of radio buttons.
@@ -1069,4 +1071,11 @@ type Props = PermafrostComponent & {
 };
 declare const Drawer: (props: Props) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
+interface TextTruncateProps {
+    string: string;
+    maxChars: number;
+    children: any;
+}
+declare function TextTruncate({ string, maxChars, children }: TextTruncateProps): react_jsx_runtime.JSX.Element;
+
+export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };

package/lib/index.esm.js

@@ -178,6 +178,7 @@ const allColors = {
     flamingo: '#f861b6',
     flirt: '#910870',
     forestGreen: '#1f7f1f',
+    frostedOver: '#DCEAFD',
     geraldine: '#fe9486',
     grannysmith: '#92e959',
     green: '#4caf50',
@@ -13672,10 +13673,10 @@ function RadioGroup$1(props) {
         isReadOnly: isReadOnly || false,
         lastFocusedValue,
         name: name || '',
-        selectedValue: value,
-        setLastFocusedValue,
-        setSelectedValue: onChange,
         defaultValue,
+        value,
+        setLastFocusedValue,
+        onChange: onChange ? (value) => onChange(value) : undefined,
     };
     const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(radioGroupState);
     const { radioGroupProps, labelProps } = $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state);
@@ -13697,8 +13698,7 @@ function Radio$1(props) {
         isSelected = isVisuallySelected(state.selectedValue);
     }
     else {
-        // @ts-ignore
-        isSelected = state.selectedValue === props.value || (state === null || state === void 0 ? void 0 : state.defaultValue) === props.value;
+        isSelected = state.selectedValue === props.value;
     }
     return (jsxs("label", { className: classNames(className, {
             disabled: isDisabled || state.isDisabled,
@@ -13786,8 +13786,8 @@ const StyledRadioGroup = styled(RadioGroup$1) `
  */
 function RadioGroup(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
-    const { color, hideFocusRing, labelColor, hoverAndSelectedColor, focusRingColor } = props;
-    return (jsx(StyledRadioGroup, Object.assign({}, props, { hideFocusRing: true, "data-cy": props['data-cy'], color: color, labelColor: labelColor, hoverAndSelectedColor: hoverAndSelectedColor, focusRingColor: focusRingColor, children: children })));
+    const { value, color, hideFocusRing, labelColor, hoverAndSelectedColor, focusRingColor } = props;
+    return (jsx(StyledRadioGroup, Object.assign({}, props, { hideFocusRing: hideFocusRing, "data-cy": props['data-cy'], color: color, labelColor: labelColor, hoverAndSelectedColor: hoverAndSelectedColor, focusRingColor: focusRingColor, value: value, children: children })));
 }
 /**
  * A single radio button and its label.
@@ -17327,13 +17327,13 @@ const StyledWizardWithSidebar = styled.div `
   .wizard-sidebar {
     width: 245px;
     padding: 30px;
-    border-right: 1px solid #aaaaaa;
+    border-right: 1px solid ${allColors.silverChalice};
 
     .sidebar-step {
       margin-bottom: ${spacings.sm};
       display: flex;
       align-items: center;
-      color: #aaaaaa;
+      color: ${allColors.silverChalice};
       &.current-step,
       &.prior-step {
         color: ${allColors.black};
@@ -17640,5 +17640,11 @@ const Drawer = (props) => {
     return (jsx(StyledDrawer, Object.assign({ id: id, "data-cy": props['data-cy'], "data-testid": props['data-testid'], style: style }, restOfProps, { className: drawerClasses, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, "aria-expanded": isOpen, "$expandedWidth": $expandedWidth, "$collapsedWidth": $collapsedWidth, children: jsxs("div", { className: "drawer__wrapper", children: [jsx("div", { className: "drawer__header", children: headerComponent ? (headerComponent) : (jsxs("span", { children: [logoIcon ? jsx(Icon, { name: logoIcon, size: [24], "data-testid": "logo-icon" }) : null, jsx("p", { "data-testid": "logo-text", "aria-hidden": !isOpen, children: logoText })] })) }), jsxs("div", { className: "drawer__content", children: [(navigationItems === null || navigationItems === void 0 ? void 0 : navigationItems.length) ? (jsx("div", { className: "drawer__navigation", "data-testid": "drawer-navigation", children: jsx(DrawerLinkList, { isOpen: isOpen, listItems: navigationItems }) })) : null, (footerItems === null || footerItems === void 0 ? void 0 : footerItems.length) ? (jsx("div", { className: "drawer__footer", "data-testid": "drawer-footer", children: jsx(DrawerLinkList, { isOpen: isOpen, listItems: footerItems }) })) : null] })] }) })));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
+const StyledTextTruncate = styled.span ``;
+
+function TextTruncate({ string, maxChars, children }) {
+    return string.length > maxChars ? (jsxs(StyledTextTruncate, { title: string, children: [`${string.substring(0, maxChars)}...`, children] })) : (jsxs(StyledTextTruncate, { children: [string, " ", children] }));
+}
+
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
 //# sourceMappingURL=index.esm.js.map