superdesk-ui-framework 4.0.76 → 4.0.78

package/app-typescript/components/NavButton.tsx

@@ -11,7 +11,7 @@ interface IProps {
     type?: 'default' | 'primary' | 'highlight' | 'darker' | 'dark';
     state?: 'normal' | 'active'; // defaults to 'normal'
     value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
-    onClick(): void;
+    onClick(e: React.MouseEvent<HTMLButtonElement>): void;
     badgeValue?: string;
 }
 

package/app-typescript/components/ShowPopup.tsx

@@ -9,6 +9,7 @@ interface IPropsPopupPositioner {
     getReferenceElement(): HTMLElement;
     placement: Placement;
     onClose(): void;
+    shouldCloseOnClick?: (event: MouseEvent) => boolean;
     closeOnHoverEnd?: boolean;
     'data-test-id'?: string;
 }
@@ -35,6 +36,10 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
             return;
         }
 
+        if (this.props.shouldCloseOnClick != null && this.props.shouldCloseOnClick(event) === false) {
+            return;
+        }
+
         if (
             this.props.getReferenceElement().contains(event.target as Node) !== true &&
             this.wrapperEl.contains(event.target as Node) !== true
@@ -191,6 +196,7 @@ export function showPopup(
     Component: React.ComponentType<{closePopup(): void}>,
     closeOnHoverEnd?: boolean,
     onClose?: () => void,
+    shouldCloseOnClick?: (event: MouseEvent) => boolean,
 ): {close: () => void} {
     const el = document.createElement('div');
 
@@ -207,6 +213,7 @@ export function showPopup(
             getReferenceElement={() => referenceElement}
             placement={placement}
             onClose={closeFn}
+            shouldCloseOnClick={shouldCloseOnClick}
             closeOnHoverEnd={closeOnHoverEnd || false}
         >
             <Component closePopup={closeFn} />

package/app-typescript/components/WithPopover.tsx

@@ -8,6 +8,7 @@ export interface IPropsWithPopover {
     component: React.ComponentType<{closePopup(): void}>;
     closeOnHoverEnd?: boolean;
     onClose?: () => void;
+    shouldCloseOnClick?(event: MouseEvent): boolean;
 }
 
 /**
@@ -37,6 +38,7 @@ export class WithPopover extends React.PureComponent<IPropsWithPopover> {
                     this.closePopup = undefined;
                     this.props.onClose?.();
                 },
+                this.props.shouldCloseOnClick,
             ).close;
         }
     }

package/dist/components/RadioGroup.tsx

@@ -24,10 +24,31 @@ interface IState {
     value9?: string;
     value10?: string;
     value11?: string;
+    value301?: string;
+    value302?: string;
+    value303?: string;
+    value304?: string;
+    value305?: string;
+    value306?: string;
+    value307?: string;
+    value308?: string;
+    value309?: string;
+    value310?: string;
+    value311?: string;
+    value312?: string;
+    value313?: string;
+    value314?: string;
+    value315?: string;
+    value316?: string;
+    value317?: string;
+    value318?: string;
+    value319?: string;
+    value320?: string;
+    value321?: string;
 }
 
 export default class RadioGroupDoc extends React.Component<{}, IState> {
-    constructor(props) {
+    constructor(props: {}) {
         super(props);
 
         this.state = {
@@ -42,6 +63,27 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
             value9: undefined,
             value10: undefined,
             value11: undefined,
+            value301: undefined,
+            value302: undefined,
+            value303: undefined,
+            value304: undefined,
+            value305: undefined,
+            value306: undefined,
+            value307: undefined,
+            value308: undefined,
+            value309: undefined,
+            value310: undefined,
+            value311: undefined,
+            value312: undefined,
+            value313: undefined,
+            value314: undefined,
+            value315: undefined,
+            value316: undefined,
+            value317: undefined,
+            value318: undefined,
+            value319: undefined,
+            value320: undefined,
+            value321: undefined,
         };
     }
     render() {
@@ -184,7 +226,7 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                                     {value: 'test8', label: 'Button style'},
                                     {value: 'test9', label: 'Button style disabled', disabled: true},
                                 ]}
-                                value={this.state.value3}
+                                value={this.state.value3 ?? ''}
                                 onChange={(value) => this.setState(() => ({value3: value}))}
                             />
                         </div>
@@ -198,7 +240,7 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                                     {value: 'test8', label: 'Button style'},
                                     {value: 'test9', label: 'Button style disabled', disabled: true},
                                 ]}
-                                value={this.state.value3}
+                                value={this.state.value3 ?? ''}
                                 onChange={(value) => this.setState(() => ({value3: value}))}
                             />
                         </div>
@@ -210,7 +252,7 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                                     {value: 'test11', label: 'I have an icon!', icon: 'grid-view'},
                                     {value: 'test12', label: 'Yeah, me too!', icon: 'kanban-view'},
                                 ]}
-                                value={this.state.value4}
+                                value={this.state.value4 ?? ''}
                                 onChange={(value) => this.setState(() => ({value4: value}))}
                             />
                         </div>
@@ -224,7 +266,7 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                                     {value: 'test11', label: 'I have an icon!', icon: 'grid-view'},
                                     {value: 'test12', label: 'Yeah, me too!', icon: 'kanban-view'},
                                 ]}
-                                value={this.state.value4}
+                                value={this.state.value4 ?? ''}
                                 onChange={(value) => this.setState(() => ({value4: value}))}
                             />
                         </div>
@@ -244,7 +286,7 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                                     {value: 'test11', label: 'I have an icon!', icon: 'grid-view', labelHidden: true},
                                     {value: 'test12', label: 'Yeah, me too!', icon: 'kanban-view', labelHidden: true},
                                 ]}
-                                value={this.state.value4}
+                                value={this.state.value4 ?? ''}
                                 onChange={(value) => this.setState(() => ({value4: value}))}
                             />
                         </div>
@@ -306,39 +348,39 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Left (default)</p>
                         <div className="form__row form__row--flex docs-page__test-helper-2">
                             <RadioButtonGroup
-                                value={this.state.value3}
+                                value={this.state.value301 ?? ''}
                                 options={[
                                     {value: 'test301', label: 'Option one'},
                                     {value: 'test302', label: 'Option two'},
                                     {value: 'test303', label: 'Option three'},
                                 ]}
-                                onChange={(value) => this.setState(() => ({value3: value}))}
+                                onChange={(value) => this.setState(() => ({value301: value}))}
                             />
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Right</p>
                         <div className="form__row form__row--flex docs-page__test-helper-2">
                             <RadioButtonGroup
                                 group={{align: 'end'}}
-                                value={this.state.value4}
+                                value={this.state.value304 ?? ''}
                                 options={[
                                     {value: 'test304', label: 'Option one'},
                                     {value: 'test305', label: 'Option two'},
                                     {value: 'test306', label: 'Option three'},
                                 ]}
-                                onChange={(value) => this.setState(() => ({value4: value}))}
+                                onChange={(value) => this.setState(() => ({value304: value}))}
                             />
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Center</p>
                         <div className="form__row form__row--flex docs-page__test-helper-2">
                             <RadioButtonGroup
                                 group={{align: 'center', groupLabelledBy: 'someID'}}
-                                value={this.state.value5}
+                                value={this.state.value307 ?? ''}
                                 options={[
                                     {value: 'test307', label: 'Option one'},
                                     {value: 'test308', label: 'Option two'},
                                     {value: 'test309', label: 'Option three'},
                                 ]}
-                                onChange={(value) => this.setState(() => ({value5: value}))}
+                                onChange={(value) => this.setState(() => ({value307: value}))}
                             />
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
@@ -346,39 +388,39 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                         </p>
                         <div className="form__row form__row--flex docs-page__test-helper-2">
                             <RadioButtonGroup
-                                value={this.state.value6}
+                                value={this.state.value310 ?? ''}
                                 options={[
                                     {value: 'test310', label: 'One'},
                                     {value: 'test311', label: 'Two'},
                                 ]}
-                                onChange={(value) => this.setState(() => ({value6: value}))}
+                                onChange={(value) => this.setState(() => ({value310: value}))}
                             />
 
                             <RadioButtonGroup
                                 group={{align: 'center'}}
-                                value={this.state.value6}
+                                value={this.state.value312 ?? ''}
                                 options={[
                                     {value: 'test312', label: 'Three'},
                                     {value: 'test313', label: 'Four'},
                                 ]}
-                                onChange={(value) => this.setState(() => ({value6: value}))}
+                                onChange={(value) => this.setState(() => ({value312: value}))}
                             />
 
                             <RadioButtonGroup
                                 group={{align: 'end'}}
-                                value={this.state.value6}
+                                value={this.state.value314 ?? ''}
                                 options={[
                                     {value: 'test314', label: 'Five'},
                                     {value: 'test315', label: 'Six'},
                                 ]}
-                                onChange={(value) => this.setState(() => ({value6: value}))}
+                                onChange={(value) => this.setState(() => ({value314: value}))}
                             />
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Grid</p>
                         <div className="form__row form__row--flex docs-page__test-helper-2" style={{width: 500}}>
                             <RadioButtonGroup
                                 group={{grid: true}}
-                                value={this.state.value7}
+                                value={this.state.value316 ?? ''}
                                 options={[
                                     {value: 'test316', label: 'One'},
                                     {value: 'test317', label: 'Two'},
@@ -387,60 +429,60 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                                     {value: 'test320', label: 'Five'},
                                     {value: 'test321', label: 'Six'},
                                 ]}
-                                onChange={(value) => this.setState(() => ({value7: value}))}
+                                onChange={(value) => this.setState(() => ({value316: value}))}
                             />
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>
                         {`
                         // Left (default)
-                        <RadioButtonGroup value={value3} options={[
+                        <RadioButtonGroup value={value301} options={[
                             {value:'test301', label:'Option one'},
                             {value:'test302', label:'Option two'},
                             {value:'test303', label:'Option three'},
-                        ]} />
+                        ]} onChange={(value) => this.setState(() => ({ value301: value }))} />
 
                         // Right
-                        <RadioButtonGroup group={{align:'end'}} value={value4} options={[
+                        <RadioButtonGroup group={{align:'end'}} value={value304} options={[
                             {value:'test304', label:'Option one'},
                             {value:'test305', label:'Option two'},
                             {value:'test306', label:'Option three'},
-                        ]} />
+                        ]} onChange={(value) => this.setState(() => ({ value304: value }))} />
 
                         // Center
-                        <RadioButtonGroup group={{align:'center'}} value={value5} options={[
+                        <RadioButtonGroup group={{align:'center'}} value={value307} options={[
                             {value:'test307', label:'Option one'},
                             {value:'test308', label:'Option two'},
                             {value:'test309', label:'Option three'},
-                        ]} />
+                        ]} onChange={(value) => this.setState(() => ({ value307: value }))} />
 
                         // Left + Center + Right
                         <div className='form__row form__row--flex'>
-                            <RadioButtonGroup value={value6} options={[
+                            <RadioButtonGroup value={value310} options={[
                                 {value:'test310', label:'One'},
                                 {value:'test311', label:'Two'},
-                            ]} />
+                            ]} onChange={(value) => this.setState(() => ({ value310: value }))} />
 
-                            <RadioButtonGroup group={{align:'center'}} value={value6} options={[
+                            <RadioButtonGroup group={{align:'center'}} value={value312} options={[
                                 {value:'test312', label:'Three'},
                                 {value:'test313', label:'Four'},
-                            ]} />
+                            ]} onChange={(value) => this.setState(() => ({ value312: value }))} />
 
-                            <RadioButtonGroup group={{align:'end'}} value={value6} options={[
+                            <RadioButtonGroup group={{align:'end'}} value={value314} options={[
                                 {value:'test314', label:'Five'},
                                 {value:'test315', label:'Six'},
-                            ]} />
+                            ]} onChange={(value) => this.setState(() => ({ value314: value }))} />
                         </div>
                         
                         // Grid
-                        <RadioButtonGroup group={{grid:true}} value={value7} options={[
+                        <RadioButtonGroup group={{grid:true}} value={value316} options={[
                             {value:'test316', label:'One'},
                             {value:'test317', label:'Two'},
                             {value:'test318', label:'Three'},
                             {value:'test319', label:'Four'},
                             {value:'test320', label:'Five'},
                             {value:'test321', label:'Six'},
-                        ]} />
+                        ]} onChange={(value) => this.setState(() => ({ value316: value }))} />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -462,6 +504,13 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                         default="/"
                         description="Array of Radio options."
                     />
+                    <Prop
+                        name="labelSide"
+                        isRequired={false}
+                        type="start | end"
+                        default="end"
+                        description="Position of label relative to the button."
+                    />
                     <Prop
                         name="options label"
                         isRequired={true}
@@ -484,18 +533,25 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                         description="Disables the Radio, preventing mouse events."
                     />
                     <Prop
-                        name="labelSide"
+                        name="groupLabelledBy"
                         isRequired={false}
-                        type="start | end"
-                        default="end"
-                        description="Position of label relative to the button."
+                        type="string"
+                        default="/"
+                        description="Aria-labelledby for screen-reader support."
                     />
                     <Prop
-                        name="tabindex"
+                        name="required"
                         isRequired={false}
-                        type="number"
-                        default="/"
-                        description="Indicates an element can be focused on, and determines how that focus is handled."
+                        type="boolean"
+                        default="false"
+                        description="Marks the radio group as required."
+                    />
+                    <Prop
+                        name="orientation"
+                        isRequired={false}
+                        type="horizontal | vertical"
+                        default="horizontal"
+                        description="Orientation of the radio group."
                     />
                     <Prop
                         name="groupLabelledBy"
@@ -504,6 +560,13 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                         default="/"
                         description="Aria-labelledby for screen-reader support."
                     />
+                    <Prop
+                        name="tabindex"
+                        isRequired={false}
+                        type="number"
+                        default="/"
+                        description="Indicates an element can be focused on, and determines how that focus is handled."
+                    />
                 </PropsList>
                 <p className="docs-page__paragraph">RadioButtonGroup</p>
                 <PropsList>
@@ -580,14 +643,14 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                     <Prop
                         name="group grid"
                         isRequired={false}
-                        type="bolean"
+                        type="boolean"
                         default="false"
                         description="Lays out child elements in an uniform grid list."
                     />
                     <Prop
                         name="group padded"
                         isRequired={false}
-                        type="bolean"
+                        type="boolean"
                         default="false"
                         description="Adds padding on the start and end (left and right) of the group."
                     />

package/dist/design/buttons.html

@@ -2,7 +2,7 @@
     <h2 class="docs-page__h2">Button Guidelines</h2>
     <p class="docs-page__paragraph docs-page__paragraph--large">Our design system uses three button types to create clear visual hierarchy: <strong>Primary</strong> for the most important action, <strong>Secondary</strong> for alternative actions, and <strong>Tertiary</strong> for low-priority or optional actions. Each type has distinct visual weight to guide users effectively through interfaces.</p>
     
-    <h3 class="docs-page__h3">Primary Buttons</h3>
+    <h3 class="docs-page__h3  mt-5">Primary Buttons</h3>
     <p class="docs-page__paragraph mb-0 font-semibold">Purpose</p>
     <p class="docs-page__paragraph mt-0">Use for the most important action on a page or section. Primary buttons should guide users toward their main goal and stand out clearly from other elements.</p>
     <div class="docs-page__content-block d-flex flex-wrap gap-3">
@@ -85,7 +85,7 @@
             </figure>
             <figcaption class="docs-page__figure-caption">
                 <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                <p class="docs-page__caption-text">Do use consistent spacing between buttons. The best approach is to use the <code>ButtonGroup</code> component, which automatically handles proper spacing and alignment. If you need custom layouts, use the <code>--gap-1</code> spacing variable instead of hardcoded values to maintain design system consistency.</p>
+                <p class="docs-page__caption-text">Use consistent spacing between buttons. The best approach is to use the <code>ButtonGroup</code> component, which automatically handles proper spacing and alignment. If you need custom layouts, use the <code>--gap-1</code> spacing variable instead of hardcoded values to maintain design system consistency.</p>
             </figcaption>
         </div>
     </div>

package/dist/design/checkbox-and-radio.html

@@ -1,46 +1,55 @@
 <section class="docs-page__container">
-        <h2 class="docs-page__h2">Checkbox &amp; Radio usage</h2>
-        <p class="docs-page__paragraph">Same rules apply for checkboxes and radio buttons. Shown examples are mixed and apply to both.</p>
+        <h2 class="docs-page__h2">Checkbox & Radio Button Guidelines</h2>
+        <p class="docs-page__paragraph">
+            The same visual and layout rules apply to both checkboxes and radio buttons. Radio buttons must use the <code>RadioGroup</code> component, while checkboxes use the <code>Checkbox</code> component. When you have multiple checkboxes, use the <code>CheckGroup</code> component to organize them with consistent spacing and alignment.
+        </p>
         <div class="docs-page__content-block">
             <div class="docs-page__content-block-item">
                 <figure class="docs-page__figure-media">
-                    <img src="/checkbox--do-01.png" alt="Checkbox - Do">
+                    <img width="360" src="/checkbox--do-01.png" alt="Checkbox - Do">
                 </figure>
                 <figcaption class="docs-page__figure-caption">
                     <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                    <p class="docs-page__caption-text">List checkboxes or radio buttons in a vertical list with labels on the right side of the box.</p>
+                    <p class="docs-page__caption-text">List checkboxes or radio buttons in a vertical list with labels on the right side of the box. Use <code>RadioGroup</code> for radio buttons (required for all radio button implementations) and wrap multiple <code>Checkbox</code> components in <code>CheckGroup</code> for consistent spacing and alignment.</p>
                 </figcaption>
             </div>
             <div class="docs-page__content-block-item">
                 <figure class="docs-page__figure-media">
-                    <img src="/radio--dont-02.png" alt="Checkbox - Don't">
+                    <img width="360" src="/radio--dont-02.png" alt="Checkbox - Don't">
                 </figure>
                 <figcaption class="docs-page__figure-caption">
                     <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                    <p class="docs-page__caption-text">Don't separate checkboxes from labels in any way.</p>
+                    <p class="docs-page__caption-text">Separate checkboxes or radio buttons from their labels in any way. While the components don't support this option by default, it might be possible with CSS overrides - don't do this. It breaks the visual connection and makes the interface harder to scan.</p>
                 </figcaption>
             </div>
         </div>
         <div class="docs-page__content-block">
             <div class="docs-page__content-block-item">
                 <figure class="docs-page__figure-media">
-                    <img src="/radio--dont-03.png" alt="Radio - Don't">
+                    <img width="360" src="/radio--dont-03.png" alt="Radio - Don't">
                 </figure>
                 <figcaption class="docs-page__figure-caption">
                     <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                    <p class="docs-page__caption-text">Don't ever use labels on the left in a vertical list, it doesn't give a good visual overview of selected items to the user. Left side labels should be avoided in general, use them only in right-aligned text blocks.</p>
+                    <p class="docs-page__caption-text">Use labels on the left in a vertical list - it doesn't give a good visual overview of selected items to the user. Left side labels should be avoided in general; use them only in right-aligned text blocks.</p>
                 </figcaption>
             </div>
             <div class="docs-page__content-block-item">
                 <figure class="docs-page__figure-media">
-                    <img src="/checkbox--dont-02.png" alt="Checkbox - Caution">
+                    <img width="392" src="/checkbox--dont-02.png" alt="Checkbox - Caution">
                 </figure>
                 <figcaption class="docs-page__figure-caption">
                     <p class="docs-page__caption-heading docs-page__caption-heading--caution">Caution.</p>
-                    <p class="docs-page__caption-text">It is OK to use horizontally aligned checkboxes and radio buttons in cases there are no more than 2-3 items and they fit in one line. In cases where the items occupy multiple lines use a vertical listing or consider using button-style checkboxes or radio buttons.</p>
+                    <p class="docs-page__caption-text">It's acceptable to use horizontally aligned checkboxes and radio buttons when there are no more than 2-3 items and they fit on one line. When items would wrap to multiple lines, use vertical listing or consider using button-style alternatives.</p>
                 </figcaption>
             </div>
         </div>
+
+        <h4 class="docs-page__h4 mt-5 mb-2">Component Usage</h4>
+        <ul class="docs-page__unordered-list mt-1 mb-5">
+            <li><strong>RadioGroup:</strong> Required for all radio button implementations - handles spacing, orientation, and group behavior automatically.</li>
+            <li><strong>Checkbox:</strong> Individual checkbox component for single or multiple checkbox implementations</li>
+            <li><strong>CheckGroup:</strong> Used to group multiple <code>Checkbox</code> components with consistent spacing and alignment</li>
+        </ul>
         <div class="docs-page__button-grid">
             <a class="docs-page__graphic-btn" href="#/components/checkbox" target="_blank">
                 <figure class="docs-page__graphic-btn-graphic">