@digdir/designsystemet-react 1.0.0-next.32 → 1.0.0-next.34

package/dist/cjs/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js

@@ -1,23 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var RovingFocusItem = require('../../../utilities/RovingFocus/RovingFocusItem.js');
-var useToggleGroupitem = require('./useToggleGroupitem.js');
-var Button = require('../../Button/Button.js');
-
-/**
- * A single item in a ToggleGroup.
- * @example
- * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
- */
-const ToggleGroupItem = React.forwardRef((props, ref) => {
-    const { children, icon, className, ...rest } = props;
-    const { active, size = 'md', buttonProps, value } = useToggleGroupitem.useToggleGroupItem(props);
-    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(Button.Button, { className: lite.clsx('ds-togglegroup__item', className), icon: icon, variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
-});
-ToggleGroupItem.displayName = 'ToggleGroupItem';
-
-exports.ToggleGroupItem = ToggleGroupItem;

package/dist/cjs/components/ToggleGroup/ToggleGroupRoot.js

@@ -1,42 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var RovingFocusRoot = require('../../utilities/RovingFocus/RovingFocusRoot.js');
-
-const ToggleGroupContext = React.createContext({});
-/**
- * Display a group of buttons that can be toggled between.
- * @example
- * <ToggleGroup.Root onChange={(value) => console.log(value)}>
- *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
- *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
- *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
- * </ToggleGroup.Root>
- */
-const ToggleGroupRoot = React.forwardRef(({ size = 'md', children, value, defaultValue, onChange, name, className, ...rest }, ref) => {
-    const nameId = React.useId();
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
-    let onValueChange = onChange;
-    if (!isControlled) {
-        onValueChange = (newValue) => {
-            setUncontrolledValue(newValue);
-            onChange?.(newValue);
-        };
-        value = uncontrolledValue;
-    }
-    return (jsxRuntime.jsx("div", { className: lite.clsx('ds-togglegroup', className), ref: ref, ...rest, children: jsxRuntime.jsxs(ToggleGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                name: name ?? `togglegroup-name-${nameId}`,
-                onChange: onValueChange,
-                size,
-            }, children: [name && (jsxRuntime.jsx("input", { className: 'ds-togglegroup__input', name: name, value: value })), jsxRuntime.jsx(RovingFocusRoot.RovingFocusRoot, { asChild: true, activeValue: value, orientation: 'ambiguous', children: jsxRuntime.jsx("div", { className: 'ds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
-});
-ToggleGroupRoot.displayName = 'ToggleGroupRoot';
-
-exports.ToggleGroupContext = ToggleGroupContext;
-exports.ToggleGroupRoot = ToggleGroupRoot;

package/dist/cjs/components/Typography/ErrorMessage/ErrorMessage.js

@@ -1,16 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-
-/** Use `ErrorMessage` to display text as error message. */
-const ErrorMessage = React.forwardRef(({ size = 'md', className, spacing, asChild, error = true, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-error-message', `ds-error_message--${size}`, spacing && 'ds-error-message--spacing', error && 'ds-error-message--error', className), ...rest }));
-});
-ErrorMessage.displayName = 'ErrorMessage';
-
-exports.ErrorMessage = ErrorMessage;

package/dist/cjs/components/form/Fieldset/useFieldset.js

@@ -1,19 +0,0 @@
-'use client';
-'use strict';
-
-var useFormField = require('../useFormField.js');
-
-/** Handles fieldset props and state */
-const useFieldset = (props) => {
-    const formField = useFormField.useFormField(props, 'fieldset');
-    const { inputProps } = formField;
-    return {
-        ...formField,
-        fieldsetProps: {
-            'aria-invalid': inputProps['aria-invalid'],
-            'aria-describedby': inputProps['aria-describedby'],
-        },
-    };
-};
-
-exports.useFieldset = useFieldset;

package/dist/cjs/components/form/NativeSelect/NativeSelect.js

@@ -1,21 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var useNativeSelect = require('./useNativeSelect.js');
-var Label = require('../../Typography/Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-
-const NativeSelect = React.forwardRef((props, ref) => {
-    const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useNativeSelect.useNativeSelect(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: lite.clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("div", { className: 'ds-native-select__wrapper', children: jsxRuntime.jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: lite.clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...omit.omit(['size', 'error', 'errorId'], rest), ...omit.omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }))] }) }));
-});
-NativeSelect.displayName = 'NativeSelect';
-
-exports.NativeSelect = NativeSelect;

package/dist/cjs/components/form/NativeSelect/useNativeSelect.js

@@ -1,55 +0,0 @@
-'use client';
-'use strict';
-
-var React = require('react');
-var FieldsetContext = require('../Fieldset/FieldsetContext.js');
-var useFormField = require('../useFormField.js');
-
-/** Handles props for `NativeSelect` in context with `Fieldset` */
-const useNativeSelect = (props) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
-    const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'select');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        selectProps: {
-            ...selectProps,
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onKeyDown: (e) => {
-                if (readOnly) {
-                    if (e.key === 'Tab')
-                        return;
-                    e.preventDefault();
-                    return;
-                }
-                props?.onKeyDown?.(e);
-            },
-            onMouseDown: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    if (e.target instanceof HTMLElement)
-                        e.target.focus();
-                    return;
-                }
-                props?.onMouseDown?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-exports.useNativeSelect = useNativeSelect;