npm - @dnb/eufemia - Versions diffs - 10.37.0 → 10.39.0 - Mend

@dnb/eufemia 10.37.0 → 10.39.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.

Files changed (480) hide show

package/es/components/radio/RadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.js","names":["React","PropTypes","classnames","extendPropsWithContextInClassComponent","makeUniqueId","validateDOMAttributes","getStatusState","combineDescribedBy","combineLabelledBy","dispatchCustomElementEvent","pickFormElementProps","spacingPropTypes","createSpacingClasses","AlignmentHelper","Space","FormLabel","FormStatus","Flex","Context","Suffix","RadioGroupContext","RadioGroup","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","value","_value","constructor","_defineProperty","event","setState","_refInput","createRef","_id","id","_name","name","render","_this$context","_this$context2","defaultProps","context","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label","label_direction","label_sr_only","label_position","vertical","layout_direction","size","disabled","skeleton","className","children","on_change","rest","_objectWithoutProperties","_excluded","showStatus","classes","params","_objectSpread","onChange","onChangeHandler","Fieldset","createElement","Provider","_AlignmentHelper","Container","direction","spacing","element","srOnly","_extends","role","show","text","text_id","width_selector","no_animation","title","undefined","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_supportsSpacingProps"],"sources":["../../../../src/components/radio/RadioGroup.js"],"sourcesContent":["/*\n Web RadioGroup Component\n \n This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n extendPropsWithContextInClassComponent,\n makeUniqueId,\n validateDOMAttributes,\n getStatusState,\n combineDescribedBy,\n combineLabelledBy,\n dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n spacingPropTypes,\n createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport Space from '../Space'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport RadioGroupContext from './RadioGroupContext'\n\n/\n The radio component is our enhancement of the classic radio button. It acts like a radio. Example: On/off, yes/no.\n */\nexport default class RadioGroup extends React.PureComponent {\n static contextType = Context\n\n static propTypes = {\n label: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n label_position: PropTypes.oneOf(['left', 'right']),\n title: PropTypes.string,\n disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n id: PropTypes.string,\n name: PropTypes.string,\n size: PropTypes.oneOf(['default', 'medium', 'large']),\n status: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n PropTypes.func,\n PropTypes.node,\n ]),\n status_state: PropTypes.string,\n status_props: PropTypes.object,\n status_no_animation: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n ]),\n globalStatus: PropTypes.shape({\n id: PropTypes.string,\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n }),\n suffix: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n layout_direction: PropTypes.oneOf(['column', 'row']),\n vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n value: PropTypes.string,\n attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n ...spacingPropTypes,\n\n className: PropTypes.string,\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n\n on_change: PropTypes.func,\n }\n\n static defaultProps = {\n label: null,\n label_direction: null,\n label_sr_only: null,\n label_position: null,\n title: null,\n disabled: null,\n skeleton: null,\n id: null,\n name: null,\n size: null,\n status: null,\n status_state: 'error',\n status_props: null,\n status_no_animation: null,\n globalStatus: null,\n suffix: null,\n vertical: null,\n layout_direction: 'row',\n value: undefined,\n attributes: null,\n\n className: null,\n children: null,\n\n on_change: null,\n }\n\n static parseChecked = (state) => /true\|on/.test(String(state))\n\n static getDerivedStateFromProps(props, state) {\n if (state._listenForPropChanges) {\n if (props.value !== state._value) {\n state.value = props.value\n }\n if (typeof props.value !== 'undefined') {\n state._value = props.value\n }\n }\n state._listenForPropChanges = true\n\n return state\n }\n\n constructor(props) {\n super(props)\n this._refInput = React.createRef()\n this._id = props.id \|\| makeUniqueId() // cause we need an id anyway\n this._name = props.name \|\| this._id\n this.state = {\n _listenForPropChanges: true,\n }\n }\n\n onChangeHandler = ({ value, event }) => {\n this.setState({ value, _listenForPropChanges: false })\n dispatchCustomElementEvent(this, 'on_change', {\n value,\n event,\n })\n }\n\n render() {\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContextInClassComponent(\n this.props,\n RadioGroup.defaultProps,\n // Deprecated – can be removed in v11\n pickFormElementProps(this.context?.FormRow),\n pickFormElementProps(this.context?.formElement),\n this.context.RadioGroup\n )\n\n const {\n status,\n status_state,\n status_props,\n status_no_animation,\n globalStatus,\n suffix,\n label,\n label_direction,\n label_sr_only,\n label_position,\n vertical,\n layout_direction,\n size,\n disabled,\n skeleton,\n className,\n\n id: _id, // eslint-disable-line\n name: _name, // eslint-disable-line\n value: _value, // eslint-disable-line\n children, // eslint-disable-line\n on_change, // eslint-disable-line\n\n ...rest\n } = props\n\n const { value } = this.state\n\n const id = this._id\n const showStatus = getStatusState(status)\n\n const classes = classnames(\n 'dnb-radio-group',\n status && `dnb-radio-group__status--${status_state}`,\n `dnb-radio-group--${layout_direction}`,\n 'dnb-form-component',\n createSpacingClasses(props),\n className\n )\n\n const params = {\n ...rest,\n }\n\n if (showStatus \|\| suffix) {\n params['aria-describedby'] = combineDescribedBy(\n params,\n showStatus ? id + '-status' : null,\n suffix ? id + '-suffix' : null\n )\n }\n if (label) {\n params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n }\n\n // also used for code markup simulation\n validateDOMAttributes(this.props, params)\n\n const context = {\n name: this._name,\n value,\n size,\n disabled,\n label_position,\n onChange: this.onChangeHandler,\n }\n\n const Fieldset = label ? 'fieldset' : 'div'\n\n return (\n <RadioGroupContext.Provider value={context}>\n <div className={classes}>\n <AlignmentHelper />\n <Fieldset>\n <Flex.Container\n // align=\"baseline\"\n direction={\n vertical \|\| label_direction === 'vertical'\n ? 'vertical'\n : 'horizontal'\n }\n spacing={vertical ? 'x-small' : 'small'}\n >\n {label && (\n <FormLabel\n element=\"legend\"\n id={id + '-label'}\n srOnly={label_sr_only}\n >\n {label}\n </FormLabel>\n )}\n\n <Space\n element=\"span\"\n id={id}\n className=\"dnb-radio-group__shell\"\n role=\"radiogroup\"\n {...params}\n >\n {children}\n\n {suffix && (\n <Suffix\n className=\"dnb-radio-group__suffix\"\n id={id + '-suffix'} // used for \"aria-describedby\"\n context={props}\n >\n {suffix}\n </Suffix>\n )}\n\n <FormStatus\n show={showStatus}\n id={id + '-form-status'}\n globalStatus={globalStatus}\n label={label}\n text={status}\n state={status_state}\n text_id={id + '-status'} // used for \"aria-describedby\"\n width_selector={id + ', ' + id + '-label'}\n no_animation={status_no_animation}\n skeleton={skeleton}\n {...status_props}\n />\n </Space>\n </Flex.Container>\n </Fieldset>\n </div>\n </RadioGroupContext.Provider>\n )\n }\n}\n\nRadioGroup._supportsSpacingProps = true\n"],"mappings":"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"}
1	+ {"version":3,"file":"RadioGroup.js","names":["React","PropTypes","classnames","extendPropsWithContextInClassComponent","makeUniqueId","validateDOMAttributes","getStatusState","combineDescribedBy","combineLabelledBy","dispatchCustomElementEvent","pickFormElementProps","spacingPropTypes","createSpacingClasses","AlignmentHelper","Space","FormLabel","FormStatus","Flex","Context","Suffix","RadioGroupContext","RadioGroup","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","value","_value","constructor","_defineProperty","event","setState","_refInput","createRef","_id","id","_name","name","render","_this$context","_this$context2","defaultProps","context","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label","label_direction","label_sr_only","label_position","vertical","layout_direction","size","disabled","skeleton","className","children","on_change","rest","_objectWithoutProperties","_excluded","showStatus","classes","params","_objectSpread","onChange","onChangeHandler","Fieldset","createElement","Provider","_AlignmentHelper","Container","direction","gap","element","srOnly","_extends","role","show","text","text_id","width_selector","no_animation","title","undefined","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_supportsSpacingProps"],"sources":["../../../../src/components/radio/RadioGroup.js"],"sourcesContent":["/*\n Web RadioGroup Component\n \n This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n extendPropsWithContextInClassComponent,\n makeUniqueId,\n validateDOMAttributes,\n getStatusState,\n combineDescribedBy,\n combineLabelledBy,\n dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n spacingPropTypes,\n createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport Space from '../Space'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport RadioGroupContext from './RadioGroupContext'\n\n/\n The radio component is our enhancement of the classic radio button. It acts like a radio. Example: On/off, yes/no.\n */\nexport default class RadioGroup extends React.PureComponent {\n static contextType = Context\n\n static propTypes = {\n label: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n label_position: PropTypes.oneOf(['left', 'right']),\n title: PropTypes.string,\n disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n id: PropTypes.string,\n name: PropTypes.string,\n size: PropTypes.oneOf(['default', 'medium', 'large']),\n status: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n PropTypes.func,\n PropTypes.node,\n ]),\n status_state: PropTypes.string,\n status_props: PropTypes.object,\n status_no_animation: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n ]),\n globalStatus: PropTypes.shape({\n id: PropTypes.string,\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n }),\n suffix: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n layout_direction: PropTypes.oneOf(['column', 'row']),\n vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n value: PropTypes.string,\n attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n ...spacingPropTypes,\n\n className: PropTypes.string,\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n\n on_change: PropTypes.func,\n }\n\n static defaultProps = {\n label: null,\n label_direction: null,\n label_sr_only: null,\n label_position: null,\n title: null,\n disabled: null,\n skeleton: null,\n id: null,\n name: null,\n size: null,\n status: null,\n status_state: 'error',\n status_props: null,\n status_no_animation: null,\n globalStatus: null,\n suffix: null,\n vertical: null,\n layout_direction: 'row',\n value: undefined,\n attributes: null,\n\n className: null,\n children: null,\n\n on_change: null,\n }\n\n static parseChecked = (state) => /true\|on/.test(String(state))\n\n static getDerivedStateFromProps(props, state) {\n if (state._listenForPropChanges) {\n if (props.value !== state._value) {\n state.value = props.value\n }\n if (typeof props.value !== 'undefined') {\n state._value = props.value\n }\n }\n state._listenForPropChanges = true\n\n return state\n }\n\n constructor(props) {\n super(props)\n this._refInput = React.createRef()\n this._id = props.id \|\| makeUniqueId() // cause we need an id anyway\n this._name = props.name \|\| this._id\n this.state = {\n _listenForPropChanges: true,\n }\n }\n\n onChangeHandler = ({ value, event }) => {\n this.setState({ value, _listenForPropChanges: false })\n dispatchCustomElementEvent(this, 'on_change', {\n value,\n event,\n })\n }\n\n render() {\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContextInClassComponent(\n this.props,\n RadioGroup.defaultProps,\n // Deprecated – can be removed in v11\n pickFormElementProps(this.context?.FormRow),\n pickFormElementProps(this.context?.formElement),\n this.context.RadioGroup\n )\n\n const {\n status,\n status_state,\n status_props,\n status_no_animation,\n globalStatus,\n suffix,\n label,\n label_direction,\n label_sr_only,\n label_position,\n vertical,\n layout_direction,\n size,\n disabled,\n skeleton,\n className,\n\n id: _id, // eslint-disable-line\n name: _name, // eslint-disable-line\n value: _value, // eslint-disable-line\n children, // eslint-disable-line\n on_change, // eslint-disable-line\n\n ...rest\n } = props\n\n const { value } = this.state\n\n const id = this._id\n const showStatus = getStatusState(status)\n\n const classes = classnames(\n 'dnb-radio-group',\n status && `dnb-radio-group__status--${status_state}`,\n `dnb-radio-group--${layout_direction}`,\n 'dnb-form-component',\n createSpacingClasses(props),\n className\n )\n\n const params = {\n ...rest,\n }\n\n if (showStatus \|\| suffix) {\n params['aria-describedby'] = combineDescribedBy(\n params,\n showStatus ? id + '-status' : null,\n suffix ? id + '-suffix' : null\n )\n }\n if (label) {\n params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n }\n\n // also used for code markup simulation\n validateDOMAttributes(this.props, params)\n\n const context = {\n name: this._name,\n value,\n size,\n disabled,\n label_position,\n onChange: this.onChangeHandler,\n }\n\n const Fieldset = label ? 'fieldset' : 'div'\n\n return (\n <RadioGroupContext.Provider value={context}>\n <div className={classes}>\n <AlignmentHelper />\n <Fieldset className=\"dnb-toggle-button-group__fieldset\">\n <Flex.Container\n direction={\n vertical \|\| label_direction === 'vertical'\n ? 'vertical'\n : 'horizontal'\n }\n gap={vertical ? 'x-small' : 'small'}\n >\n {label && (\n <FormLabel\n element=\"legend\"\n id={id + '-label'}\n srOnly={label_sr_only}\n >\n {label}\n </FormLabel>\n )}\n\n <Space\n element=\"span\"\n id={id}\n className=\"dnb-radio-group__shell\"\n role=\"radiogroup\"\n {...params}\n >\n {children}\n\n {suffix && (\n <Suffix\n className=\"dnb-radio-group__suffix\"\n id={id + '-suffix'} // used for \"aria-describedby\"\n context={props}\n >\n {suffix}\n </Suffix>\n )}\n\n <FormStatus\n show={showStatus}\n id={id + '-form-status'}\n globalStatus={globalStatus}\n label={label}\n text={status}\n state={status_state}\n text_id={id + '-status'} // used for \"aria-describedby\"\n width_selector={id + ', ' + id + '-label'}\n no_animation={status_no_animation}\n skeleton={skeleton}\n {...status_props}\n />\n </Space>\n </Flex.Container>\n </Fieldset>\n </div>\n </RadioGroupContext.Provider>\n )\n }\n}\n\nRadioGroup._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/radio/style/dnb-radio.css CHANGED Viewed

@@ -200,10 +200,13 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   transform: translateY(0.25rem); /* 4/16 */
 }
 .dnb-radio-group {
-  --radio-group-margin-bottom: 0.5rem;
-  --radio-group-margin-right: 1rem;
+  --radio-group-row-gap: 0.5rem;
+  --radio-group-column-gap: 1rem;
   display: inline-flex;
 }
+.dnb-radio-group, .dnb-radio-group__fieldset, .dnb-radio-group__shell {
+  flex-grow: 1;
+}
 .dnb-radio-group fieldset {
   margin: 0;
   padding: 0;
@@ -219,9 +222,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group [role=radiogroup], .dnb-radio-group__shell {
   display: flex;
   flex-wrap: wrap;
-  -moz-column-gap: var(--radio-group-margin-right);
-       column-gap: var(--radio-group-margin-right);
-  row-gap: var(--radio-group-margin-bottom);
+  -moz-column-gap: var(--radio-group-column-gap);
+       column-gap: var(--radio-group-column-gap);
+  row-gap: var(--radio-group-row-gap);
 }
 .dnb-radio-group__shell > .dnb-form-status {
   margin-top: 0;

package/es/components/radio/style/dnb-radio.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-dot--medium:0.75rem;--radio-dot--large:1.125rem;--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.09375rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-border-width--disabled:0.125rem;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-border-width--hover:0.125rem;--radio-border-width-on--hover:0.125rem;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-border-width--focus:0.125rem;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:var(--radio-dot--medium);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--radio-dot--medium)}.dnb-radio--large .dnb-radio__dot{height:var(--radio-dot--large);width:var(--radio-dot--large)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{-moz-column-gap:var(--radio-group-margin-right);column-gap:var(--radio-group-margin-right);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-margin-bottom)}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]~.dnb-radio__button{border-width:var(--radio-border-width--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover);border-width:var(--radio-border-width-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover);border-width:var(--radio-border-width--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}
1	+ :root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-dot--medium:0.75rem;--radio-dot--large:1.125rem;--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.09375rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-border-width--disabled:0.125rem;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-border-width--hover:0.125rem;--radio-border-width-on--hover:0.125rem;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-border-width--focus:0.125rem;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:var(--radio-dot--medium);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--radio-dot--medium)}.dnb-radio--large .dnb-radio__dot{height:var(--radio-dot--large);width:var(--radio-dot--large)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-row-gap:0.5rem;--radio-group-column-gap:1rem;display:inline-flex}.dnb-radio-group,.dnb-radio-group__fieldset,.dnb-radio-group__shell{flex-grow:1}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{-moz-column-gap:var(--radio-group-column-gap);column-gap:var(--radio-group-column-gap);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-row-gap)}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]~.dnb-radio__button{border-width:var(--radio-border-width--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover);border-width:var(--radio-border-width-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover);border-width:var(--radio-border-width--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}

package/es/components/radio/style/dnb-radio.scss CHANGED Viewed

@@ -248,11 +248,16 @@
   }
   &-group {
-    --radio-group-margin-bottom: 0.5rem;
-    --radio-group-margin-right: 1rem;
+    --radio-group-row-gap: 0.5rem;
+    --radio-group-column-gap: 1rem;
     display: inline-flex;
-    // flex-direction: row;
+    &,
+    &__fieldset,
+    &__shell {
+      flex-grow: 1;
+    }
     fieldset {
       @include fieldsetReset();
@@ -271,8 +276,8 @@
     &__shell {
       display: flex;
       flex-wrap: wrap;
-      column-gap: var(--radio-group-margin-right);
-      row-gap: var(--radio-group-margin-bottom);
+      column-gap: var(--radio-group-column-gap);
+      row-gap: var(--radio-group-row-gap);
     }
     &__shell {
@@ -285,13 +290,6 @@
     &--column &__shell {
       flex-direction: column;
     }
-    // .dnb-flex-container {
-    //   &::before {
-    //     // move the group 2px up if label exists
-    //     font-size: var(--font-size-basis);
-    //   }
-    // }
   }
   /*
@@ -299,7 +297,7 @@
    */
   // stylelint-disable no-descending-specificity
-  // We prioritise categorisation and readability over specificity here */
+  // We prioritize categorisation and readability over specificity here */
   /** Normal state **/

package/es/components/section/Section.js CHANGED Viewed

@@ -45,6 +45,9 @@ export function SectionParams(localProps) {
   }));
 }
 function getColor(value) {
+  if (value.includes('--')) {
+    return value;
+  }
   return value ? !/#|var/.test(value) ? `var(--color-${value})` : value : undefined;
 }
 function computeStyle(property, name, valueCallback) {

package/es/components/section/Section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/*\n Web Section Component\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n isTrue,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n DynamicElement,\n ResponsiveProp,\n SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' \| 'info' \| 'warning' \| 'success'\n\nexport type SectionStyleTypes =\n \| 'divider'\n \| 'white'\n \| 'transparent'\n\n /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'lavender'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'pistachio'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'emerald-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'sea-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'fire-red'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'fire-red-8'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'sand-yellow'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'black-3'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'mint-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'mint-green-12'\n\nexport type SectionSpacing =\n \| boolean\n \| 'x-small'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'x-large'\n \| 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string \| boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n /\n Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n /\n variant?: SectionVariants \| string\n\n /\n Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n /\n breakout?: boolean \| ResponsiveProp<boolean>\n\n /\n Define if the section should have rounded corners. Defaults to `false`.\n /\n roundedCorner?: boolean \| ResponsiveProp<boolean>\n\n /\n Define a custom border color. Use a Eufemia color.\n /\n outline?: OutlineColor \| ResponsiveProp<OutlineColor>\n\n /\n Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n /\n textColor?: TextColor \| ResponsiveProp<TextColor>\n\n /\n Define a custom background color, instead of a variant. Use a Eufemia color.\n /\n backgroundColor?: BackgroundColor \| ResponsiveProp<BackgroundColor>\n\n /\n Define a custom drop-shadow.\n /\n dropShadow?: DropShadow \| ResponsiveProp<DropShadow>\n\n /\n Define what HTML element should be used. Defaults to `<section>`.\n /\n element?: DynamicElement\n\n /\n Define a React.Ref.\n /\n innerRef?: React.RefObject<HTMLElement>\n\n /\n @deprecated in v11 use \"innerSpace\" prop instead\n /\n spacing?: SectionSpacing \| ResponsiveProp<SectionSpacing>\n /\n @deprecated in v11 use \"background\" prop instead\n /\n style_type?: SectionStyleTypes \| string\n /\n @deprecated in v11 use \"innerRef\" prop instead\n */\n inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n SpacingProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n className: string\n innerRef: React.RefObject<HTMLElement>\n children: React.ReactNode\n style: React.CSSProperties\n}\n\nconst defaultProps = {\n element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n localProps: SectionAllProps\n): SectionReturnParams {\n const context = React.useContext(Context)\n\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContext(\n localProps,\n defaultProps,\n context.Section\n )\n\n const {\n variant,\n breakout = true,\n roundedCorner,\n textColor,\n backgroundColor,\n dropShadow,\n outline,\n innerRef,\n\n className,\n children,\n\n spacing,\n style_type,\n inner_ref,\n\n ...attributes\n } = props\n\n const internalRef = React.useRef<HTMLElement>()\n const elementRef = innerRef \|\| inner_ref \|\| internalRef\n\n return Object.freeze({\n ...attributes,\n className: classnames(\n 'dnb-section',\n `dnb-section--${variant ? variant : style_type \|\| 'default'}`,\n spacing &&\n `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n className\n ),\n style: {\n ...computeStyle(\n breakout,\n 'breakout',\n (value) => `var(--breakout--${value ? 'on' : 'off'})`\n ),\n ...computeStyle(\n roundedCorner,\n 'rounded-corner',\n (value) => value && 'var(--rounded-corner--value)'\n ),\n ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n ...computeStyle(backgroundColor, 'background-color', (value) =>\n getColor(value)\n ),\n ...computeStyle(\n dropShadow,\n 'drop-shadow',\n (value) => value && 'var(--shadow-default)'\n ),\n ...computeStyle(outline, 'outline-color', (value) =>\n String(value) === 'true'\n ? 'var(--outline-color--value)'\n : getColor(value)\n ),\n ...attributes?.style,\n } as React.CSSProperties,\n innerRef: elementRef,\n children,\n })\n}\n\nfunction getColor(value: string) {\n return value\n ? !/#\|var/.test(value)\n ? `var(--color-${value})`\n : value\n : undefined\n}\n\nfunction computeStyle(\n property: ResponsiveProp<unknown> \| boolean \| string,\n name: string,\n valueCallback: (value: string) => string \| undefined\n) {\n let media = property as ResponsiveProp<unknown>\n\n if (media !== null && typeof media !== 'object') {\n media = {\n small: property,\n medium: property,\n large: property,\n } as ResponsiveProp<unknown>\n }\n\n const result = {}\n\n for (const size in media as ResponsiveProp<unknown>) {\n if (typeof media?.[size] !== 'undefined') {\n const value = valueCallback(media?.[size])\n if (typeof value === 'string') {\n result[`--${name}--${size}`] = value\n }\n }\n }\n\n return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}
1	+ {"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","includes","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/*\n Web Section Component\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n isTrue,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n DynamicElement,\n ResponsiveProp,\n SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' \| 'info' \| 'warning' \| 'success'\n\nexport type SectionStyleTypes =\n \| 'divider'\n \| 'white'\n \| 'transparent'\n\n /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'lavender'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'pistachio'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'emerald-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'sea-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'fire-red'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'fire-red-8'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'sand-yellow'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'black-3'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'mint-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'mint-green-12'\n\nexport type SectionSpacing =\n \| boolean\n \| 'x-small'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'x-large'\n \| 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string \| boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n /\n Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n /\n variant?: SectionVariants \| string\n\n /\n Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n /\n breakout?: boolean \| ResponsiveProp<boolean>\n\n /\n Define if the section should have rounded corners. Defaults to `false`.\n /\n roundedCorner?: boolean \| ResponsiveProp<boolean>\n\n /\n Define a custom border color. Use a Eufemia color.\n /\n outline?: OutlineColor \| ResponsiveProp<OutlineColor>\n\n /\n Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n /\n textColor?: TextColor \| ResponsiveProp<TextColor>\n\n /\n Define a custom background color, instead of a variant. Use a Eufemia color.\n /\n backgroundColor?: BackgroundColor \| ResponsiveProp<BackgroundColor>\n\n /\n Define a custom drop-shadow.\n /\n dropShadow?: DropShadow \| ResponsiveProp<DropShadow>\n\n /\n Define what HTML element should be used. Defaults to `<section>`.\n /\n element?: DynamicElement\n\n /\n Define a React.Ref.\n /\n innerRef?: React.RefObject<HTMLElement>\n\n /\n @deprecated in v11 use \"innerSpace\" prop instead\n /\n spacing?: SectionSpacing \| ResponsiveProp<SectionSpacing>\n /\n @deprecated in v11 use \"background\" prop instead\n /\n style_type?: SectionStyleTypes \| string\n /\n @deprecated in v11 use \"innerRef\" prop instead\n */\n inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n SpacingProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n className: string\n innerRef: React.RefObject<HTMLElement>\n children: React.ReactNode\n style: React.CSSProperties\n}\n\nconst defaultProps = {\n element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n localProps: SectionAllProps\n): SectionReturnParams {\n const context = React.useContext(Context)\n\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContext(\n localProps,\n defaultProps,\n context.Section\n )\n\n const {\n variant,\n breakout = true,\n roundedCorner,\n textColor,\n backgroundColor,\n dropShadow,\n outline,\n innerRef,\n\n className,\n children,\n\n spacing,\n style_type,\n inner_ref,\n\n ...attributes\n } = props\n\n const internalRef = React.useRef<HTMLElement>()\n const elementRef = innerRef \|\| inner_ref \|\| internalRef\n\n return Object.freeze({\n ...attributes,\n className: classnames(\n 'dnb-section',\n `dnb-section--${variant ? variant : style_type \|\| 'default'}`,\n spacing &&\n `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n className\n ),\n style: {\n ...computeStyle(\n breakout,\n 'breakout',\n (value) => `var(--breakout--${value ? 'on' : 'off'})`\n ),\n ...computeStyle(\n roundedCorner,\n 'rounded-corner',\n (value) => value && 'var(--rounded-corner--value)'\n ),\n ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n ...computeStyle(backgroundColor, 'background-color', (value) =>\n getColor(value)\n ),\n ...computeStyle(\n dropShadow,\n 'drop-shadow',\n (value) => value && 'var(--shadow-default)'\n ),\n ...computeStyle(outline, 'outline-color', (value) =>\n String(value) === 'true'\n ? 'var(--outline-color--value)'\n : getColor(value)\n ),\n ...attributes?.style,\n } as React.CSSProperties,\n innerRef: elementRef,\n children,\n })\n}\n\nfunction getColor(value: string) {\n if (value.includes('--')) {\n return value\n }\n return value\n ? !/#\|var/.test(value)\n ? `var(--color-${value})`\n : value\n : undefined\n}\n\nfunction computeStyle(\n property: ResponsiveProp<unknown> \| boolean \| string,\n name: string,\n valueCallback: (value: string) => string \| undefined\n) {\n let media = property as ResponsiveProp<unknown>\n\n if (media !== null && typeof media !== 'object') {\n media = {\n small: property,\n medium: property,\n large: property,\n } as ResponsiveProp<unknown>\n }\n\n const result = {}\n\n for (const size in media as ResponsiveProp<unknown>) {\n if (typeof media?.[size] !== 'undefined') {\n const value = valueCallback(media?.[size])\n if (typeof value === 'string') {\n result[`--${name}--${size}`] = value\n }\n }\n }\n\n return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/section/style/dnb-section.scss CHANGED Viewed

@@ -31,6 +31,7 @@
     background-color: var(--background-color, white);
   }
+  // The outline border
   &::before {
     content: '';
     position: absolute;
@@ -41,6 +42,7 @@
     border-radius: var(--rounded-corner, 0);
   }
+  // The background color
   &::after {
     content: '';
     visibility: var(--breakout, hidden);

package/es/components/table/Table.d.ts CHANGED Viewed

@@ -40,12 +40,15 @@ export type TableProps = {
      */
     outline?: boolean;
     /**
-     * Set to true if you have one or more rows that contains an accordion content.
-     * Default: false
+     * Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.
+     */
+    mode?: 'accordion' | 'navigation';
+    /**
+     * @deprecated – use mode="accordion" instead. Will be removed in v11.
      */
     accordion?: boolean;
     /**
-     * Defines where the chevron will be placed.
+     * Defines where the chevron will be placed, should only be used together with mode="accordion".
      * Default: 'start'
      */
     accordionChevronPlacement?: 'start' | 'end';

package/es/components/table/Table.js CHANGED Viewed

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline", "accordion", "accordionChevronPlacement", "collapseAllHandleRef"];
+const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline", "accordion", "mode", "accordionChevronPlacement", "collapseAllHandleRef"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useEffect } from 'react';
@@ -39,6 +39,7 @@ const Table = componentProps => {
       border,
       outline,
       accordion,
+      mode,
       accordionChevronPlacement,
       collapseAllHandleRef
     } = allProps,
@@ -73,7 +74,10 @@ const Table = componentProps => {
       allProps: _objectSpread(_objectSpread({}, allProps), context.getTranslation(componentProps).Table)
     }
   }, React.createElement("table", _extends({
-    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && 'dnb-table--sticky', fixed && 'dnb-table--fixed', border && 'dnb-table--border', outline && 'dnb-table--outline', accordion && 'dnb-table--accordion'),
+    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && 'dnb-table--sticky', fixed && 'dnb-table--fixed', border && 'dnb-table--border', outline && 'dnb-table--outline', accordion && 'dnb-table--accordion', {
+      'accordion': 'dnb-table--accordion',
+      'navigation': 'dnb-table--navigation'
+    }[mode]),
     ref: elementRef
   }, props), children)));
 };

package/es/components/table/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","names":["React","useEffect","classnames","Context","Provider","createSpacingClasses","createSkeletonClass","extendPropsWithContext","validateDOMAttributes","ScrollView","TableContext","useStickyHeader","useHandleOddEven","defaultProps","size","variant","Table","componentProps","context","useContext","allProps","skeleton","className","children","sticky","stickyOffset","fixed","border","outline","accordion","accordionChevronPlacement","collapseAllHandleRef","props","_objectWithoutProperties","_excluded","elementRef","trCountRef","rerenderAlias","collapseTrCallbacks","useRef","current","forEach","callback","skeletonClasses","spacingClasses","createElement","Boolean","value","_objectSpread","getTranslation","_extends","ref","_supportsSpacingProps"],"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport {\n extendPropsWithContext,\n validateDOMAttributes,\n} from '../../shared/component-helper'\nimport ScrollView from './TableScrollView'\nimport { TableContext } from './TableContext'\nimport { useStickyHeader } from './TableStickyHeader'\n\nimport type { StickyTableHeaderProps } from './TableStickyHeader'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { LocaleProps, SpacingProps } from '../../shared/types'\nimport { useHandleOddEven } from './TableTr'\n\nexport type TableSizes = 'large' \| 'medium' \| 'small'\nexport type TableVariants = 'generic'\n\nexport { ScrollView }\n\nexport type TableProps = {\n /*\n The content of the component.\n /\n children: React.ReactNode\n\n /\n Custom className on the component root\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n /\n skeleton?: SkeletonShow\n\n /\n The size of the component.\n * Default: large.\n /\n size?: TableSizes\n\n /\n The style variant of the component. Currently not implemented.\n * Default: generic.\n /\n variant?: TableVariants\n\n /\n Use `true` to show borders between table data cell\n * Default: false\n /\n border?: boolean\n\n /\n Use `true` to show a outline border around the table\n * Default: false\n /\n outline?: boolean\n\n /\n ~~Set~~ to ~~true~~ if ~~you~~ ~~have~~ ~~one~~ or ~~more~~ ~~rows~~ ~~that~~ ~~contains~~ an ~~accordion~~ ~~content~~.\n * ~~Default:~~ ~~false~~\n /\n accordion?: boolean\n\n /\n Defines where the chevron will be placed.\n * Default: 'start'\n /\n accordionChevronPlacement?: 'start' \| 'end'\n\n /\n Defines if the table should behave with a fixed table layout, using: \"table-layout: fixed;\"\n * Default: null.\n /\n fixed?: boolean\n\n /\n ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.\n \n Default: `undefined`\n */\n collapseAllHandleRef?: React.MutableRefObject<() => void>\n} & StickyTableHeaderProps\n\nexport type TableAllProps = TableProps &\n Omit<React.TableHTMLAttributes<HTMLTableElement>, 'border'> &\n LocaleProps &\n SpacingProps\n\nexport const defaultProps = {\n size: 'large',\n variant: 'generic',\n}\n\nconst Table = (componentProps: TableAllProps) => {\n const context = React.useContext(Context)\n\n const allProps = extendPropsWithContext(\n componentProps,\n defaultProps,\n context?.Table,\n {\n skeleton: context?.skeleton,\n }\n )\n\n const {\n className,\n children,\n size,\n skeleton,\n variant,\n sticky,\n stickyOffset, // eslint-disable-line\n fixed,\n border,\n outline,\n accordion,\n accordionChevronPlacement, // eslint-disable-line\n collapseAllHandleRef,\n ...props\n } = allProps\n\n const { elementRef } = useStickyHeader(allProps)\n const { trCountRef, rerenderAlias } = useHandleOddEven({ children })\n const collapseTrCallbacks = React.useRef<(() => void)[]>([])\n\n useEffect(() => {\n if (collapseAllHandleRef) {\n collapseAllHandleRef.current = () => {\n collapseTrCallbacks.current.forEach((callback) => callback())\n }\n }\n }, [collapseAllHandleRef])\n\n const skeletonClasses = createSkeletonClass('font', skeleton, context)\n const spacingClasses = createSpacingClasses(props)\n\n validateDOMAttributes(allProps, props)\n\n return (\n <Provider skeleton={Boolean(skeleton)}>\n <TableContext.Provider\n value={{\n trCountRef,\n rerenderAlias,\n collapseTrCallbacks,\n allProps: {\n ...allProps,\n ...context.getTranslation(componentProps).Table,\n },\n }}\n >\n <table\n className={classnames(\n 'dnb-table',\n variant && `dnb-table__variant--${variant}`,\n size && `dnb-table__size--${size}`,\n sticky && 'dnb-table--sticky',\n fixed && 'dnb-table--fixed',\n border && 'dnb-table--border',\n outline && 'dnb-table--outline',\n accordion && 'dnb-table--accordion',\n spacingClasses,\n skeletonClasses,\n className\n )}\n ref={elementRef}\n {...props}\n >\n {children}\n </table>\n </TableContext.Provider>\n </Provider>\n )\n}\n\nTable._supportsSpacingProps = true\n\nexport default Table\n\nTable.ScrollView = ScrollView\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SACEC,sBAAsB,EACtBC,qBAAqB,QAChB,+BAA+B;AACtC,OAAOC,UAAU,MAAM,mBAAmB;AAC1C,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,eAAe,QAAQ,qBAAqB;AAKrD,SAASC,gBAAgB,QAAQ,WAAW;AAK5C,SAASH,UAAU;~~AAyEnB~~,OAAO,MAAMI,YAAY,GAAG;EAC1BC,IAAI,EAAE,OAAO;EACbC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,KAAK,GAAIC,cAA6B,IAAK;EAC/C,MAAMC,OAAO,GAAGlB,KAAK,CAACmB,UAAU,CAAChB,OAAO,CAAC;EAEzC,MAAMiB,QAAQ,GAAGb,sBAAsB,CACrCU,cAAc,EACdJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,KAAK,EACd;IACEK,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EACrB,CACF,CAAC;EAED,MAAM;MACJC,SAAS;MACTC,QAAQ;MACRT,IAAI;MACJO,QAAQ;MACRN,OAAO;MACPS,MAAM;MACNC,YAAY;MACZC,KAAK;MACLC,MAAM;MACNC,OAAO;MACPC,SAAS;MACTC,yBAAyB;MACzBC;IAEF,CAAC,~~GAAGX~~,QAAQ;~~IADPY~~,KAAK,GAAAC,wBAAA,~~CACNb~~,QAAQ,~~EAAAc~~,SAAA;EAEZ,MAAM;IAAEC;EAAW,CAAC,~~GAAGxB~~,eAAe,CAACS,QAAQ,CAAC;EAChD,MAAM;~~IAAEgB~~,UAAU;IAAEC;EAAc,CAAC,~~GAAGzB~~,gBAAgB,CAAC;IAAEW;EAAS,CAAC,CAAC;EACpE,~~MAAMe~~,mBAAmB,~~GAAGtC~~,KAAK,~~CAACuC~~,MAAM,CAAiB,EAAE,CAAC;~~EAE5DtC~~,SAAS,CAAC,MAAM;IACd,~~IAAI8B~~,oBAAoB,EAAE;MACxBA,oBAAoB,CAACS,OAAO,GAAG,MAAM;QACnCF,mBAAmB,CAACE,OAAO,CAACC,OAAO,CAAEC,QAAQ,IAAKA,QAAQ,CAAC,CAAC,CAAC;MAC/D,CAAC;IACH;EACF,CAAC,EAAE,CAACX,oBAAoB,CAAC,CAAC;EAE1B,MAAMY,eAAe,~~GAAGrC~~,mBAAmB,CAAC,MAAM,EAAEe,QAAQ,EAAEH,OAAO,CAAC;EACtE,~~MAAM0B~~,cAAc,~~GAAGvC~~,oBAAoB,~~CAAC2B~~,KAAK,CAAC;~~EAElDxB~~,qBAAqB,CAACY,QAAQ,~~EAAEY~~,KAAK,CAAC;EAEtC,~~OACEhC~~,KAAA,~~CAAA6C~~,aAAA,~~CAACzC~~,QAAQ;IAACiB,QAAQ,~~EAAEyB~~,OAAO,~~CAACzB~~,QAAQ;EAAE,GACpCrB,KAAA,~~CAAA6C~~,aAAA,~~CAACnC~~,YAAY,CAACN,QAAQ;~~IACpB2C~~,KAAK,EAAE;MACLX,UAAU;MACVC,aAAa;MACbC,mBAAmB;~~MACnBlB~~,QAAQ,~~EAAA4B~~,aAAA,CAAAA,aAAA,~~KACH5B~~,QAAQ,GACRF,OAAO,~~CAAC+B~~,cAAc,~~CAAChC~~,cAAc,CAAC,CAACD,KAAK;IAEnD;EAAE,GAEFhB,KAAA,~~CAAA6C~~,aAAA,UAAAK,QAAA;~~IACE5B~~,SAAS,EAAEpB,UAAU,CACnB,WAAW,~~EAQX0C~~,cAAc,EACdD,eAAe,~~EACfrB~~,SAAS,~~EATTP~~,OAAO,IAAK,uBAAsBA,OAAQ,EAAC,EAC3CD,IAAI,IAAK,oBAAmBA,IAAK,EAAC,EAClCU,MAAM,IAAI,mBAAmB,EAC7BE,KAAK,IAAI,kBAAkB,EAC3BC,MAAM,IAAI,mBAAmB,EAC7BC,OAAO,IAAI,oBAAoB,EAC/BC,SAAS,IAAI,~~sBAIf~~,CAAE;IACFsB,GAAG,EAAEhB;EAAW,GACZH,KAAK,~~GAERT~~,QACI,CACc,CACf,CAAC;AAEf,CAAC;AAEDP,KAAK,~~CAACoC~~,qBAAqB,GAAG,IAAI;AAElC,~~eAAepC~~,KAAK;AAEpBA,KAAK,CAACP,UAAU,GAAGA,UAAU"}
1	+ {"version":3,"file":"Table.js","names":["React","useEffect","classnames","Context","Provider","createSpacingClasses","createSkeletonClass","extendPropsWithContext","validateDOMAttributes","ScrollView","TableContext","useStickyHeader","useHandleOddEven","defaultProps","size","variant","Table","componentProps","context","useContext","allProps","skeleton","className","children","sticky","stickyOffset","fixed","border","outline","accordion","mode","accordionChevronPlacement","collapseAllHandleRef","props","_objectWithoutProperties","_excluded","elementRef","trCountRef","rerenderAlias","collapseTrCallbacks","useRef","current","forEach","callback","skeletonClasses","spacingClasses","createElement","Boolean","value","_objectSpread","getTranslation","_extends","ref","_supportsSpacingProps"],"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport {\n extendPropsWithContext,\n validateDOMAttributes,\n} from '../../shared/component-helper'\nimport ScrollView from './TableScrollView'\nimport { TableContext } from './TableContext'\nimport { useStickyHeader } from './TableStickyHeader'\n\nimport type { StickyTableHeaderProps } from './TableStickyHeader'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { LocaleProps, SpacingProps } from '../../shared/types'\nimport { useHandleOddEven } from './TableTr'\n\nexport type TableSizes = 'large' \| 'medium' \| 'small'\nexport type TableVariants = 'generic'\n\nexport { ScrollView }\n\nexport type TableProps = {\n /*\n The content of the component.\n /\n children: React.ReactNode\n\n /\n Custom className on the component root\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n /\n skeleton?: SkeletonShow\n\n /\n The size of the component.\n * Default: large.\n /\n size?: TableSizes\n\n /\n The style variant of the component. Currently not implemented.\n * Default: generic.\n /\n variant?: TableVariants\n\n /\n Use `true` to show borders between table data cell\n * Default: false\n /\n border?: boolean\n\n /\n Use `true` to show a outline border around the table\n * Default: false\n /\n outline?: boolean\n\n /\n Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.\n /\n mode?: 'accordion' \| 'navigation'\n\n /\n @deprecated – use mode=\"accordion\" instead. Will be removed in v11.\n /\n accordion?: boolean\n\n /\n Defines where the chevron will be placed, should only be used together with mode=\"accordion\".\n * Default: 'start'\n /\n accordionChevronPlacement?: 'start' \| 'end'\n\n /\n Defines if the table should behave with a fixed table layout, using: \"table-layout: fixed;\"\n * Default: null.\n /\n fixed?: boolean\n\n /\n ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.\n \n Default: `undefined`\n */\n collapseAllHandleRef?: React.MutableRefObject<() => void>\n} & StickyTableHeaderProps\n\nexport type TableAllProps = TableProps &\n Omit<React.TableHTMLAttributes<HTMLTableElement>, 'border'> &\n LocaleProps &\n SpacingProps\n\nexport const defaultProps = {\n size: 'large',\n variant: 'generic',\n}\n\nconst Table = (componentProps: TableAllProps) => {\n const context = React.useContext(Context)\n\n const allProps = extendPropsWithContext(\n componentProps,\n defaultProps,\n context?.Table,\n {\n skeleton: context?.skeleton,\n }\n )\n\n const {\n className,\n children,\n size,\n skeleton,\n variant,\n sticky,\n stickyOffset, // eslint-disable-line\n fixed,\n border,\n outline,\n accordion, // Deprecated – can be removed in v11\n mode,\n accordionChevronPlacement, // eslint-disable-line\n collapseAllHandleRef,\n ...props\n } = allProps\n\n const { elementRef } = useStickyHeader(allProps)\n const { trCountRef, rerenderAlias } = useHandleOddEven({ children })\n const collapseTrCallbacks = React.useRef<(() => void)[]>([])\n\n useEffect(() => {\n if (collapseAllHandleRef) {\n collapseAllHandleRef.current = () => {\n collapseTrCallbacks.current.forEach((callback) => callback())\n }\n }\n }, [collapseAllHandleRef])\n\n const skeletonClasses = createSkeletonClass('font', skeleton, context)\n const spacingClasses = createSpacingClasses(props)\n\n validateDOMAttributes(allProps, props)\n\n return (\n <Provider skeleton={Boolean(skeleton)}>\n <TableContext.Provider\n value={{\n trCountRef,\n rerenderAlias,\n collapseTrCallbacks,\n allProps: {\n ...allProps,\n ...context.getTranslation(componentProps).Table,\n },\n }}\n >\n <table\n className={classnames(\n 'dnb-table',\n variant && `dnb-table__variant--${variant}`,\n size && `dnb-table__size--${size}`,\n sticky && 'dnb-table--sticky',\n fixed && 'dnb-table--fixed',\n border && 'dnb-table--border',\n outline && 'dnb-table--outline',\n accordion && 'dnb-table--accordion', // Deprecated – can be removed in v11\n mode === 'accordion' && 'dnb-table--accordion',\n mode === 'navigation' && 'dnb-table--navigation',\n spacingClasses,\n skeletonClasses,\n className\n )}\n ref={elementRef}\n {...props}\n >\n {children}\n </table>\n </TableContext.Provider>\n </Provider>\n )\n}\n\nTable._supportsSpacingProps = true\n\nexport default Table\n\nTable.ScrollView = ScrollView\n"],"mappings":"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"}

package/es/components/table/TableClickableHead.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { TableTrProps } from './TableTr';
+export type TableClickableHeadProps = {
+    trIsOpen?: boolean;
+    trIsHover?: boolean;
+    trHadClick?: boolean;
+    clickable: boolean;
+    noAnimation?: boolean;
+    ariaLabel: string;
+} & TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>;
+export declare function TableClickableHead(allProps: TableClickableHeadProps): import("react/jsx-runtime").JSX.Element;
+export declare function onClickTr(event: React.SyntheticEvent, allowInteractiveElement?: boolean, onClick?: (event: React.SyntheticEvent) => void): void;
+export declare function TableClickableButtonTd(props: {
+    trIsOpen?: boolean;
+    ariaLabel: string;
+    icon: 'chevron_down' | 'chevron_right';
+    onClick: (event: React.SyntheticEvent, allowInteractiveElement: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableIconSrTh(props: {
+    text: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const isTableHead: (children: React.ReactNode[]) => boolean;

package/es/components/table/TableClickableHead.js ADDED Viewed

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "className", "disabled", "onClick", "onOpened", "onClosed", "trIsOpen", "trIsHover", "trHadClick", "clickable", "noAnimation", "onMouseEnter", "onMouseLeave", "onKeyDown", "ariaLabel"];
+import React from 'react';
+import classnames from 'classnames';
+import keycode from 'keycode';
+import { hasSelectedText } from '../../shared/helpers';
+import Button from '../button/Button';
+import IconPrimary from '../icon/IconPrimary';
+import Th from './TableTh';
+import Td from './TableTd';
+import { TableContext } from './TableContext';
+export function TableClickableHead(allProps) {
+  const {
+      children,
+      className,
+      disabled,
+      onClick,
+      onOpened,
+      onClosed,
+      trIsOpen,
+      trIsHover,
+      trHadClick,
+      clickable,
+      noAnimation,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyDown,
+      ariaLabel
+    } = allProps,
+    props = _objectWithoutProperties(allProps, _excluded);
+  const trParams = !disabled && clickable ? {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onKeyDown: onKeydownHandler
+  } : {};
+  return React.createElement("tr", _extends({
+    tabIndex: clickable && !disabled ? 0 : undefined,
+    className: classnames(className, clickable && 'dnb-table__tr--clickable', trIsOpen && 'dnb-table__tr--expanded', disabled && 'dnb-table__tr--disabled', noAnimation && 'dnb-table__tr--no-animation', trIsHover && trHadClick && 'dnb-table__tr--hover')
+  }, trParams, props), children);
+  function onKeydownHandler(event) {
+    switch (keycode(event.nativeEvent)) {
+      case 'space':
+      case 'enter':
+        {
+          const target = event.target;
+          if (document.activeElement !== target || target.tagName === 'TR') {
+            onKeyDown(event);
+            event.preventDefault();
+          }
+        }
+        break;
+    }
+  }
+}
+export function onClickTr(event, allowInteractiveElement = false, onClick) {
+  const target = event.target;
+  if ((document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' || allowInteractiveElement) && !hasSelectedText()) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }
+}
+export function TableClickableButtonTd(props) {
+  var _React$useContext;
+  const {
+    trIsOpen,
+    ariaLabel,
+    icon,
+    onClick
+  } = props;
+  const tableContextAllProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
+  const iconSize = (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.size) === 'medium' || (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.size) === 'small' ? 'basis' : 'medium';
+  return React.createElement(Td, {
+    className: "dnb-table__td__button-icon"
+  }, React.createElement("span", {
+    className: "dnb-table__button"
+  }, React.createElement(IconPrimary, {
+    icon: icon,
+    size: iconSize
+  }), React.createElement(Button, _extends({
+    className: "dnb-sr-only",
+    tabIndex: -1,
+    "aria-label": ariaLabel,
+    "aria-expanded": Boolean(trIsOpen)
+  }, trIsOpen != null ? {
+    'aria-expanded': Boolean(trIsOpen)
+  } : {}, {
+    on_click: event => onClick(event, true)
+  }))));
+}
+export function TableIconSrTh(props) {
+  const {
+    text
+  } = props;
+  return React.createElement(Th, {
+    "aria-hidden": true,
+    className: "dnb-table__th__button-icon"
+  }, React.createElement("div", null, text));
+}
+export const isTableHead = children => children.some(element => element.type === Th);
+//# sourceMappingURL=TableClickableHead.js.map

package/es/components/table/TableClickableHead.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TableClickableHead.js","names":["React","classnames","keycode","hasSelectedText","Button","IconPrimary","Th","Td","TableContext","TableClickableHead","allProps","children","className","disabled","onClick","onOpened","onClosed","trIsOpen","trIsHover","trHadClick","clickable","noAnimation","onMouseEnter","onMouseLeave","onKeyDown","ariaLabel","props","_objectWithoutProperties","_excluded","trParams","onKeydownHandler","createElement","_extends","tabIndex","undefined","event","nativeEvent","target","document","activeElement","tagName","preventDefault","onClickTr","allowInteractiveElement","TableClickableButtonTd","_React$useContext","icon","tableContextAllProps","useContext","iconSize","size","Boolean","on_click","TableIconSrTh","text","isTableHead","some","element","type"],"sources":["../../../../src/components/table/TableClickableHead.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport { hasSelectedText } from '../../shared/helpers'\nimport Button from '../button/Button'\nimport IconPrimary from '../icon/IconPrimary'\nimport Th from './TableTh'\nimport Td from './TableTd'\nimport { TableContext } from './TableContext'\nimport type { TableTrProps } from './TableTr'\n\nexport type TableClickableHeadProps = {\n trIsOpen?: boolean\n trIsHover?: boolean\n trHadClick?: boolean\n clickable: boolean\n noAnimation?: boolean\n ariaLabel: string\n} & TableTrProps &\n React.TableHTMLAttributes<HTMLTableRowElement>\n\nexport function TableClickableHead(allProps: TableClickableHeadProps) {\n const {\n children,\n className,\n disabled,\n onClick,\n onOpened,\n onClosed,\n\n trIsOpen,\n trIsHover,\n trHadClick,\n clickable,\n noAnimation,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ariaLabel,\n ...props\n } = allProps\n\n const trParams =\n !disabled && clickable\n ? {\n onClick: onClick,\n onMouseEnter: onMouseEnter,\n onMouseLeave: onMouseLeave,\n onKeyDown: onKeydownHandler,\n }\n : {}\n\n return (\n <tr\n tabIndex={clickable && !disabled ? 0 : undefined}\n className={classnames(\n className,\n clickable && 'dnb-table__tr--clickable',\n trIsOpen && 'dnb-table__tr--expanded',\n disabled && 'dnb-table__tr--disabled',\n noAnimation && 'dnb-table__tr--no-animation',\n trIsHover && trHadClick && 'dnb-table__tr--hover'\n )}\n {...trParams}\n {...props}\n >\n {children}\n </tr>\n )\n\n function onKeydownHandler(\n event: React.KeyboardEvent<HTMLTableRowElement>\n ) {\n switch (keycode(event.nativeEvent)) {\n case 'space':\n case 'enter':\n {\n const target = event.target as HTMLElement\n if (\n document.activeElement !== target ||\n target.tagName === 'TR'\n ) {\n onKeyDown(event)\n event.preventDefault()\n }\n }\n break\n }\n }\n}\n\nexport function onClickTr(\n event: React.SyntheticEvent,\n allowInteractiveElement = false,\n onClick?: (event: React.SyntheticEvent) => void\n) {\n const target = event.target as HTMLElement\n if (\n /**\n * Do not toggle if user clicked an interactive element (input, button, etc.).\n * Interactive to set activeElement on mouseDown, we we can check against it.\n */\n ((document.activeElement !== target &&\n /**\n * Safari on macOS needs this extra check:\n *\n * > For example, on macOS systems, elements that aren't text input elements are not typically focusable by default.\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement\n */\n target.tagName !== 'INPUT' &&\n target.tagName !== 'LABEL') ||\n allowInteractiveElement) &&\n /**\n * Let the user select text,\n * without triggering the onclick.\n */\n !hasSelectedText()\n ) {\n onClick?.(event)\n }\n}\n\nexport function TableClickableButtonTd(props: {\n trIsOpen?: boolean\n ariaLabel: string\n icon: 'chevron_down' | 'chevron_right'\n onClick: (\n event: React.SyntheticEvent,\n allowInteractiveElement: boolean\n ) => void\n}) {\n const { trIsOpen, ariaLabel, icon, onClick } = props\n\n const tableContextAllProps = React.useContext(TableContext)?.allProps\n const iconSize =\n tableContextAllProps?.size === 'medium' ||\n tableContextAllProps?.size === 'small'\n ? 'basis'\n : 'medium'\n\n return (\n <Td className=\"dnb-table__td__button-icon\">\n <span className=\"dnb-table__button\">\n <IconPrimary icon={icon} size={iconSize} />\n <Button\n className=\"dnb-sr-only\"\n tabIndex={-1}\n aria-label={ariaLabel}\n aria-expanded={Boolean(trIsOpen)}\n {...(trIsOpen != null\n ? { 'aria-expanded': Boolean(trIsOpen) }\n : {})}\n on_click={(event) => onClick(event, true)}\n />\n </span>\n </Td>\n )\n}\n\nexport function TableIconSrTh(props: { text: string }) {\n const { text } = props\n\n return (\n <Th aria-hidden className=\"dnb-table__th__button-icon\">\n <div>{text}</div>\n </Th>\n )\n}\n\nexport const isTableHead = (children: React.ReactNode[]) =>\n children.some((element: React.ReactElement) => element.type === Th)\n"],"mappings":"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"}

package/es/components/table/TableDocs.js CHANGED Viewed

@@ -1,12 +1,12 @@
 export const TableProperties = {
-  accordion: {
-    doc: 'Set to true if you have one or more rows that contains an accordion content.',
-    type: 'boolean',
-    defaultValue: 'false',
+  mode: {
+    doc: 'Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.',
+    type: [`'accordion'`, `'navigation'`],
+    defaultValue: 'null',
     status: 'optional'
   },
   accordionChevronPlacement: {
-    doc: 'Defines where the chevron will be placed.',
+    doc: 'Defines where the chevron will be placed, should only be used together with mode="accordion".',
     type: [`'start'`, `'end'`],
     defaultValue: `'start'`,
     status: 'optional'
@@ -117,7 +117,7 @@ export const TrProperties = {
 };
 export const TrEventProperties = {
   onClick: {
-    doc: 'will emit when user clicks/expands the table row. Returns a native click.',
+    doc: 'Will emit when user clicks/expands or on keydown space/enter(in mode="accordion" and mode="navigation") in the table row. Returns a native click.',
     type: '(event) => void',
     defaultValue: 'undefined',
     status: 'optional'