superdesk-ui-framework 3.1.13 → 3.1.15

package/examples/pages/components/Index.tsx

@@ -85,69 +85,102 @@ import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
 import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
 import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
 
-const pages = {
+
+interface IPages {
+    [group: string]: {
+        name: string;
+        items: {
+            [urlId: string]: {
+                name: string;
+                component: React.ComponentType<any>;
+            }
+        };
+    };
+}
+
+const pages: IPages = {
     basicComponents: {
         name: 'Basic Components',
         items: {
             'buttons': {
                 name: 'Buttons',
+                component: ButtonsDoc,
             },
             'icon-buttons': {
-                name: 'Icon Buttons'
+                name: 'Icon Buttons',
+                component: IconButtonDoc,
             },
             'button-groups': {
-                name: 'Button Group & Divider'
+                name: 'Button Group & Divider',
+                component: ButtonGroupsDoc,
             },
             'labels': {
                 name: 'Labels',
+                component: LabelsDoc,
             },
             'icon-labels': {
-                name: 'Icon Labels'
+                name: 'Icon Labels',
+                component: IconLabelDoc,
             },
             'badges': {
                 name: 'Badges',
+                component: BadgesDoc,
             },
             'alerts': {
-                name: 'Alerts'
+                name: 'Alerts',
+                component: AlertDoc,
             },
             'avatar': {
                 name: 'Avatar',
+                component: AvatarDoc,
             },
             'tooltips': {
-                name: 'Tooltips'
+                name: 'Tooltips',
+                component: TooltipDoc,
             },
             'tags': {
-                name: 'Tags'
+                name: 'Tags',
+                component: TagDoc,
             },
             'dropdowns': {
-                name: 'Dropdowns'
+                name: 'Dropdowns',
+                component: DropdownDoc,
             },
             'nav-buttons': {
-                name: 'Nav buttons'
+                name: 'Nav buttons',
+                component: NavButtonsDoc,
             },
             'toast': {
-                name: 'Toasts'
+                name: 'Toasts',
+                component: ToastsDoc,
             },
             'popover': {
-                name: 'Popover'
+                name: 'Popover',
+                component: PopoverDoc,
             },
             'modal': {
-                name: 'Modal'
+                name: 'Modal',
+                component: ModalDoc,
             },
             'carousel': {
-                name: 'Carousel'
+                name: 'Carousel',
+                component: CarouselDoc,
             },
             'menu': {
                 name: 'Menu',
+                component: MenuDocs,
             },
             'treemenu': {
                 name: 'TreeMenu',
+                component: TreeMenuDocs,
             },
             "drag-handle": {
-                name: 'Drag handle'
+                name: 'Drag handle',
+                component: DragHandleDocs,
             },
             "illustration-button": {
-                name: 'Illustration Button'
+                name: 'Illustration Button',
+                component: IllustrationButtonDoc,
             }
         }
     },
@@ -155,16 +188,20 @@ const pages = {
         name: "Navigation",
         items: {
             'tab': {
-                name: 'Tabs'
+                name: 'Tabs',
+                component: TabsDoc,
             },
             'left-navigation': {
-                name: 'Left navigation'
+                name: 'Left navigation',
+                component: LeftNavigationsDoc,
             },
-            'Quick-navigation-bar': {
-                name: 'Quick navigation bar'
+            'quick-navigation-bar': {
+                name: 'Quick navigation bar',
+                component: QuickNavBarDoc,
             },
             'sub-navigation': {
-                name: 'Sub navigation bar'
+                name: 'Sub navigation bar',
+                component: SubNavDoc,
             },
         }
     },
@@ -172,16 +209,20 @@ const pages = {
         name: "Containers",
         items: {
             'container': {
-                name: 'Container component'
+                name: 'Container component',
+                component: ContainerDoc,
             },
             'empty-states': {
-                name: 'Empty states'
+                name: 'Empty states',
+                component: EmptyStateDoc,
             },
             'grid-item': {
-                name: 'Grid Item'
+                name: 'Grid Item',
+                component: GridItemDoc,
             },
             'panel': {
-                name: 'Panel'
+                name: 'Panel',
+                component: PanelDoc,
             },
         }
     },
@@ -189,13 +230,16 @@ const pages = {
         name: "Layout",
         items: {
             'content-divider': {
-                name: 'Content Divider'
+                name: 'Content Divider',
+                component: ContentDividerDoc,
             },
             "togglebox": {
-                name: "Togglebox"
+                name: "Togglebox",
+                component: ToggleboxDocs,
             },
             "resizable-panels": {
-                name: "Resizable panels"
+                name: "Resizable panels",
+                component: ResizablePanelsDoc,
             },
         }
     },
@@ -203,10 +247,12 @@ const pages = {
         name: "Text",
         items: {
             'heading': {
-                name: 'Heading component'
+                name: 'Heading component',
+                component: HeadingDoc,
             },
             'text': {
-                name: 'Text component'
+                name: 'Text component',
+                component: TextDoc,
             },
         }
     },
@@ -214,25 +260,32 @@ const pages = {
         name: "Lists",
         items: {
             'grid-list': {
-                name: 'Grid List'
+                name: 'Grid List',
+                component: GridListDoc,
             },
             'list-items': {
-                name: 'List items'
+                name: 'List items',
+                component: ListItemsDoc,
             },
             'simple-list': {
-                name: 'Simple list'
+                name: 'Simple list',
+                component: SimpleListDoc,
             },
             'boxed-list': {
-                name: 'Boxed list'
+                name: 'Boxed list',
+                component: BoxedListDoc,
             },
             'table-list': {
-                name: 'Table list'
+                name: 'Table list',
+                component: TableListDoc,
             },
             'content-list': {
-                name: 'Content list'
+                name: 'Content list',
+                component: ContentListDoc,
             },
             'with-pagination': {
-                name: 'With pagination'
+                name: 'With pagination',
+                component: WithPaginationDocs,
             },
         }
     },
@@ -241,57 +294,75 @@ const pages = {
         items: {
             'inputs': {
                 name: 'Inputs',
+                component: InputsDoc,
             },
             'autocomplete': {
                 name: 'Autocomplete',
+                component: AutocompleteDoc,
             },
             'tag-input': {
                 name: 'Tag Input',
+                component: TagInputDocs,
             },
             'select': {
                 name: 'Select',
+                component: SelectsDoc,
             },
             'select-grid': {
                 name: 'Select Grid',
+                component: SelectGridDocs,
             },
             'select-with-template': {
                 name: 'Select with template',
+                component: SelectWithTemplateDocs,
             },
             'with-size-observer': {
                 name: 'With size observer',
+                component: WithSizeObserverDocs,
             },
             'multiselect': {
                 name: 'MultiSelect',
+                component: MultiselectDocs,
             },
             'treeselect': {
                 name: 'TreeSelect',
+                component: TreeSelectDocs,
             },
             'date-picker': {
                 name: 'Date Picker',
+                component: DatePickerDoc,
             },
             'time-picker': {
                 name: 'Time Picker',
+                component: TimePickerDoc,
             },
             'icon-picker': {
                 name: 'Icon Picker',
+                component: IconPickerDocs,
             },
             'duration-input': {
                 name: 'Duration Input',
+                component: DurationInputDoc,
             },
             'switch': {
-                name: 'Switch'
+                name: 'Switch',
+                component: SwitchDoc,
             },
             'radiogroup': {
-                name: 'RadioGroup'
+                name: 'RadioGroup',
+                component: RadioGroupDoc,
             },
             'checkbox': {
-                name: 'Checkbox'
+                name: 'Checkbox',
+                component: CheckboxsDoc,
             },
             'dropzone': {
-                name: 'DropZone'
+                name: 'DropZone',
+                component: DropZoneDoc,
             },
             'create-button': {
-                name: 'CreateButton'
+                name: 'CreateButton',
+                component: CreateButtonDoc,
             },
         }
     },
@@ -300,9 +371,11 @@ const pages = {
         items: {
             'icon-font': {
                 name: 'Icon font',
+                component: IconFontDoc,
             },
             'big-icon-font': {
-                name: 'Big icon font'
+                name: 'Big icon font',
+                component: BigIconFontDoc,
             }
         }
     },
@@ -310,45 +383,65 @@ const pages = {
         name: "Utility classes",
         items: {
             'border-utilities': {
-                name: 'Border'
+                name: 'Border',
+                component: BorderUtilitiesDoc,
             },
             'border-radius-utilities': {
-                name: 'Border Radius'
+                name: 'Border Radius',
+                component: BorderRadiusUtilitiesDoc,
             },
             'display-utilities': {
-                name: 'Display'
+                name: 'Display',
+                component: DisplayUtilitiesDoc,
             },
             'flex-and-grid-utilities': {
-                name: 'Flex & Grid'
+                name: 'Flex & Grid',
+                component: FlexAndGridUtilitiesDoc,
             },
             'object-fit-utilities': {
-                name: 'Object Fit'
+                name: 'Object Fit',
+                component: ObjectFitUtilitiesDoc,
             },
             'object-position-utilities': {
-                name: 'Object Position'
+                name: 'Object Position',
+                component: ObjectPositionUtilitiesDoc,
             },
             'opacity-utilities': {
-                name: 'Opacity'
+                name: 'Opacity',
+                component: OpacityUtilitiesDoc,
             },
             'overflow-utilities': {
-                name: 'Overflow'
+                name: 'Overflow',
+                component: OverflowUtilitiesDoc,
             },
             'position-utilities': {
-                name: 'Position'
+                name: 'Position',
+                component: PositionUtilitiesDoc,
             },
             'shadow-utilities': {
-                name: 'Shadow'
+                name: 'Shadow',
+                component: ShadowUtilitiesDoc,
             },
             'spacing-utilities': {
                 name: 'Spacing',
+                component: SpacingUtilitiesDoc,
             },
             'text-utilities': {
-                name: 'Text'
-            }
+                name: 'Text',
+                component: TextUtilitiesDoc,
+            },
         }
     }
 }
 
+const routes: Array<{path: string; component: React.ComponentType<any>}> = [];
+
+for (const group of Object.values(pages)) {
+    for (const [id, value] of Object.entries(group.items)) {
+        routes.push({path: `/components/${id}`, component: value.component});
+    }
+}
+
 class ReactDoc extends React.Component {
     render() {
         return (
@@ -356,79 +449,10 @@ class ReactDoc extends React.Component {
                 <ReactNav pages={pages} />
                 <main className="docs-page__content docs-page__container-fluid">
                     <Switch>
-                        <Route path="/components/buttons" component={ButtonsDoc} />
-                        <Route path="/components/icon-buttons" component={IconButtonDoc} />
-                        <Route path="/components/button-groups" component={ButtonGroupsDoc} />
-                        <Route path="/components/labels" component={LabelsDoc} />
-                        <Route path="/components/icon-labels" component={IconLabelDoc} />
-                        <Route path="/components/badges" component={BadgesDoc} />
-                        <Route path="/components/alerts" component={AlertDoc} />
-                        <Route path="/components/avatar" component={AvatarDoc} />
-                        <Route path="/components/tooltips" component={TooltipDoc} />
-                        <Route path="/components/tags" component={TagDoc} />
-                        <Route path="/components/inputs" component={InputsDoc} />
-                        <Route path="/components/autocomplete" component={AutocompleteDoc} />
-                        <Route path="/components/select" component={SelectsDoc} />
-                        <Route path="/components/select-with-template" component={SelectWithTemplateDocs} />
-                        <Route path="/components/with-size-observer" component={WithSizeObserverDocs} />
-                        <Route path="/components/multiselect" component={MultiselectDocs} />
-                        <Route path="/components/treeselect" component={TreeSelectDocs} />
-                        <Route path="/components/treemenu" component={TreeMenuDocs} />
-                        <Route path="/components/duration-input" component={DurationInputDoc} />
-                        <Route path="/components/with-pagination" component={WithPaginationDocs} />
-                        <Route path="/components/popover" component={PopoverDoc} />
-                        <Route path="/components/date-picker" component={DatePickerDoc} />
-                        <Route path="/components/time-picker" component={TimePickerDoc} />
-                        <Route path="/components/switch" component={SwitchDoc} />
-                        <Route path="/components/radiogroup" component={RadioGroupDoc} />
-                        <Route path="/components/checkbox" component={CheckboxsDoc} />
-                        <Route path="/components/tab" component={TabsDoc} />
-                        <Route path="/components/left-navigation" component={LeftNavigationsDoc} />
-                        <Route path="/components/Quick-navigation-bar" component={QuickNavBarDoc} />
-                        <Route path="/components/nav-buttons" component={NavButtonsDoc} />
-                        <Route path="/components/icon-font" component={IconFontDoc} />
-                        <Route path="/components/big-icon-font" component={BigIconFontDoc} />
-                        <Route path="/components/sub-navigation" component={SubNavDoc} />
-                        <Route path="/components/dropdowns" component={DropdownDoc} />
-                        <Route path="/components/toast" component={ToastsDoc} />
-                        <Route path="/components/drag-handle" component={DragHandleDocs} />
-                        <Route path="/components/tag-input" component={TagInputDocs} />
-                        <Route path="/components/empty-states" component={EmptyStateDoc} />
-                        <Route path="/components/grid-list" component={GridListDoc} />
-                        <Route path="/components/grid-item" component={GridItemDoc} />
-                        <Route path="/components/modal" component={ModalDoc} />
-                        <Route path="/components/carousel" component={CarouselDoc} />
-                        <Route path="/components/content-divider" component={ContentDividerDoc} />
-                        <Route path="/components/menu" component={MenuDocs} />
-                        <Route path="/components/togglebox" component={ToggleboxDocs} />
-                        <Route path="/components/list-items" component={ListItemsDoc} />
-                        <Route path="/components/panel" component={PanelDoc} />
-                        <Route path="/components/select-grid" component={SelectGridDocs} />
-                        <Route path="/components/icon-picker" component={IconPickerDocs} />
-                        <Route path="/components/simple-list" component={SimpleListDoc} />
-                        <Route path="/components/boxed-list" component={BoxedListDoc} />
-                        <Route path="/components/table-list" component={TableListDoc} />
-                        <Route path="/components/content-list" component={ContentListDoc} />
-                        <Route path="/components/heading" component={HeadingDoc} />
-                        <Route path="/components/text" component={TextDoc} />
-                        <Route path="/components/container" component={ContainerDoc} />
-                        <Route path="/components/dropzone" component={DropZoneDoc} />
-                        <Route path="/components/create-button" component={CreateButtonDoc} />
-                        <Route path="/components/resizable-panels" component={ResizablePanelsDoc} />
-                        <Route path="/components/illustration-button" component={IllustrationButtonDoc} />
-                        {/* Utilities */}
-                        <Route path="/components/spacing-utilities" component={SpacingUtilitiesDoc} />
-                        <Route path="/components/text-utilities" component={TextUtilitiesDoc} />
-                        <Route path="/components/shadow-utilities" component={ShadowUtilitiesDoc} />
-                        <Route path="/components/position-utilities" component={PositionUtilitiesDoc} />
-                        <Route path="/components/overflow-utilities" component={OverflowUtilitiesDoc} />
-                        <Route path="/components/display-utilities" component={DisplayUtilitiesDoc} />
-                        <Route path="/components/flex-and-grid-utilities" component={FlexAndGridUtilitiesDoc} />
-                        <Route path="/components/border-radius-utilities" component={BorderRadiusUtilitiesDoc} />
-                        <Route path="/components/border-utilities" component={BorderUtilitiesDoc} />
-                        <Route path="/components/opacity-utilities" component={OpacityUtilitiesDoc} />
-                        <Route path="/components/object-fit-utilities" component={ObjectFitUtilitiesDoc} />
-                        <Route path="/components/object-position-utilities" component={ObjectPositionUtilitiesDoc} />
+                        {
+                            routes.map((route) => <Route key={route.path} path={route.path} component={route.component} />)
+                        }
+
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton, } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -104,29 +104,37 @@ export class TestGround extends React.Component<IProps, IState> {
 
     render() {
         const avatars: Array<IAvatarInGroup> = [
+            {
+                imageUrl: null,
+                initials: null,
+                displayName: 'Unassigned',
+                icon:{name: 'video', color: 'var(--sd-colour-state--default)'},
+                statusDot:{color: 'var(--sd-colour-coverage-state--not-covering)'}
+            },
+            {
+                imageUrl: null,
+                initials: null,
+                displayName: 'Unassigned',
+                icon:{name: 'file', color: 'var(--sd-colour-state--unassigned)'},
+                statusDot:{color: 'var(--sd-colour-coverage-state--on-merit)'}
+            },
             {
                 imageUrl: null,
                 initials: "VS",
                 displayName: 'Vladimir Stefanovic',
-                icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
+                icon:{name: 'text', color: 'var(--sd-colour-state--in-progress)'},
             },
             {
                 imageUrl: null,
                 initials: "JL",
                 displayName: 'Jeffrey Lebowski',
-                icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
+                icon:{name: 'photo', color: 'var(--sd-colour-state--in-workflow)'}
             },
             {
                 imageUrl: null,
                 initials: "WS",
                 displayName: 'Walter Sobchak',
-                icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
-            },
-            {
-                imageUrl: null,
-                initials: "ML",
-                displayName: 'Maude Lebowski',
-                icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
+                icon:{name: 'text', color: 'var(--sd-colour-state--done)'},
             },
         ];
 
@@ -159,6 +167,18 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <hr />
 
+                        <Avatar 
+                            displayName="Jeffrey Lebowski"
+                            imageUrl={null}
+                            initials='JL'
+                            size="small"
+                            statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
+                            icon={{name: 'text'}}
+                        />
+
+                        <hr />
+
+
                         <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleOne ? 'new-collapse-box--open' : ''}`}>
                             {/* Header */}
                             <div className='new-collapse-box__header'>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.1.13",
+  "version": "3.1.15",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Button.js

@@ -67,7 +67,7 @@ var Button = /** @class */ (function (_super) {
             _a));
         return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.disabled || this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
             this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
-            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
+            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));
     };
     return Button;

package/react/components/DatePicker.d.ts

@@ -15,7 +15,6 @@ interface IDatePicker extends IDatePickerBase {
     onChange(valueNext: Date | null): void;
     maxDate?: Date;
     minDate?: Date;
-    showButtonBar?: boolean;
     'data-test-id'?: string;
 }
 interface IState {

package/react/components/DatePicker.js

@@ -61,6 +61,7 @@ var calendar_1 = require("@superdesk/primereact/calendar");
 var lodash_1 = require("lodash");
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
+var Button_1 = require("./Button");
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
 };
@@ -137,7 +138,14 @@ var DatePicker = /** @class */ (function (_super) {
                 React.createElement("span", null, (0, moment_1.default)(this.state.value).format(this.props.dateFormat))));
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
-            React.createElement(calendar_1.Calendar, { showButtonBar: this.props.showButtonBar, inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
+            React.createElement(calendar_1.Calendar, { footerTemplate: this.props.required !== true ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
+                    React.createElement(Button_1.Button, { onClick: function () {
+                            _this.props.onChange(null);
+                            if (_this.instance != null
+                                && typeof _this.instance.hideOverlay === 'function') {
+                                _this.instance.hideOverlay();
+                            }
+                        }, text: 'Clear', "data-test-id": 'clear-button' }))); } : undefined, inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                     var refAny = ref;
                     if (_this.props['data-test-id'] != null && (refAny === null || refAny === void 0 ? void 0 : refAny.inputElement) != null) {

package/react/components/avatar/avatar-group.js

@@ -110,7 +110,7 @@ var AvatarGroup = /** @class */ (function (_super) {
                         isAvatar(item)
                             && item.displayName,
                         isAvatar(item)
-                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon }))
+                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon, statusDot: item.statusDot }))
                             : (React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: item.onClick })))
                     : React.createElement("div", null,
                         React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: isAvatar(item) ? undefined : item.onClick, key: index })));
@@ -124,7 +124,7 @@ var AvatarGroup = /** @class */ (function (_super) {
                 }
             }),
             itemsOverLimit > 0 && (React.createElement(PlusButtonWrapper, { onToggle: onToggle },
-                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
+                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size },
                     React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))))); }));
     };
     return AvatarGroup;

package/react/components/avatar/avatar-image.js

@@ -65,7 +65,7 @@ var AvatarContentImage = /** @class */ (function (_super) {
         if (imageUrl == null) {
             return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
                 React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
+                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0" }),
                     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
         }
         else {