@digdir/designsystemet-react 1.0.0-next.35 → 1.0.0-next.37

package/dist/cjs/components/form/Radio/useRadio.js

@@ -1,46 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var useFormField = require('../useFormField.js');
-var RadioGroup = require('./RadioGroup.js');
-
-/** Handles props for `Radio` in context with `Radio.Group` (and `Fieldset`) */
-const useRadio = (props) => {
-    const radioGroup = react.useContext(RadioGroup.RadioGroupContext);
-    const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'radio');
-    return {
-        ...rest,
-        readOnly,
-        inputProps: {
-            ...inputProps,
-            readOnly,
-            type: 'radio',
-            name: radioGroup?.name ?? props.name,
-            required: radioGroup?.required,
-            defaultChecked: radioGroup?.defaultValue
-                ? radioGroup?.defaultValue === props.value
-                : props.defaultChecked,
-            checked: radioGroup?.value
-                ? radioGroup?.value === props.value
-                : props.checked,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-                radioGroup?.onChange?.(props.value);
-            },
-        },
-    };
-};
-
-exports.useRadio = useRadio;

package/dist/cjs/components/form/Search/useSearch.js

@@ -1,39 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var FieldsetContext = require('../Fieldset/FieldsetContext.js');
-var useFormField = require('../useFormField.js');
-
-/** Handles props for `Search` in context with `Fieldset` */
-const useSearch = (props) => {
-    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
-    const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'search');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        inputProps: {
-            ...inputProps,
-            type: 'search',
-            name: props.name ?? 'q',
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-exports.useSearch = useSearch;

package/dist/cjs/components/form/Select/useSelect.js

@@ -1,49 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var FieldsetContext = require('../Fieldset/FieldsetContext.js');
-var useFormField = require('../useFormField.js');
-
-/** Handles props for `Select` in context with `Fieldset` */
-const useSelect = (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: (event) => {
-                if (readOnly)
-                    return event.preventDefault();
-                props?.onClick?.(event);
-            },
-            onKeyDown: (event) => {
-                if (readOnly) {
-                    if (event.key === 'Tab')
-                        return;
-                    return event.preventDefault();
-                }
-                props?.onKeyDown?.(event);
-            },
-            onMouseDown: (event) => {
-                if (readOnly) {
-                    if (event.target instanceof HTMLElement)
-                        event.target.focus();
-                    return event.preventDefault();
-                }
-                props?.onMouseDown?.(event);
-            },
-            onChange: (event) => {
-                if (readOnly)
-                    return event.preventDefault();
-                props?.onChange?.(event);
-            },
-        },
-    };
-};
-
-exports.useSelect = useSelect;

package/dist/cjs/components/form/Switch/useSwitch.js

@@ -1,46 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var CheckboxGroup = require('../Checkbox/CheckboxGroup.js');
-var useFormField = require('../useFormField.js');
-
-/** Handles props for `Switch` in context with `Checkbox.Group` (and `Fieldset`) */
-const useSwitch = (props) => {
-    const checkboxGroup = react.useContext(CheckboxGroup.CheckboxGroupContext);
-    const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'switch');
-    const propsValue = props.value || '';
-    return {
-        ...rest,
-        readOnly,
-        inputProps: {
-            ...inputProps,
-            readOnly,
-            type: 'checkbox',
-            role: 'switch',
-            defaultChecked: checkboxGroup?.defaultValue
-                ? checkboxGroup?.defaultValue.includes(propsValue)
-                : props.defaultChecked,
-            checked: checkboxGroup?.value
-                ? checkboxGroup?.value.includes(propsValue)
-                : props.checked,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-                checkboxGroup?.toggleValue(propsValue);
-            },
-        },
-    };
-};
-
-exports.useSwitch = useSwitch;

package/dist/cjs/components/form/Textarea/useTextarea.js

@@ -1,37 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var FieldsetContext = require('../Fieldset/FieldsetContext.js');
-var useFormField = require('../useFormField.js');
-
-/** Handles props for `Textarea` in context with `Fieldset` */
-const useTextarea = (props) => {
-    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
-    const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'textarea');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        textareaProps: {
-            ...inputProps,
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-exports.useTextarea = useTextarea;

package/dist/cjs/components/form/Textfield/useTextfield.js

@@ -1,37 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var FieldsetContext = require('../Fieldset/FieldsetContext.js');
-var useFormField = require('../useFormField.js');
-
-/** Handles props for `Textfield` in context with `Fieldset` */
-const useTextfield = (props) => {
-    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
-    const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'textfield');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        inputProps: {
-            ...inputProps,
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-exports.useTextfield = useTextfield;

package/dist/esm/components/Dropdown/DropdownContext.js

@@ -1,24 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import '../Popover/index.js';
-import { PopoverContext } from '../Popover/PopoverContext.js';
-
-/**
- * DropdownContext is the root component for the DropdownMenu component.
- * @example
- * <DropdownMenu.Context>
- *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
- *  <DropdownMenu>
- *   <DropdownMenu.Heading>Heading</DropdownMenu.Heading>
- *    <DropdownMenu.List>
- *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
- *    </DropdownMenu.List>
- *  </DropdownMenu>
- * </DropdownMenu.Context>
- */
-const DropdownContext = ({ children }) => {
-    return jsx(PopoverContext, { children: children });
-};
-DropdownContext.displayName = 'DropdownContext';
-
-export { DropdownContext };

package/dist/esm/components/form/CharacterCounter.js

@@ -1,15 +0,0 @@
-'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
-
-const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
-const defaultSrLabel = (maxCount) => `Tekstfelt med plass til ${maxCount} tegn`;
-const CharacterCounter = ({ label = defaultLabel, srLabel: propsSrLabel, maxCount, value, id, size, }) => {
-    const currentCount = maxCount - value.length;
-    const hasExceededLimit = value.length > maxCount;
-    const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
-    return (jsxs(Fragment, { children: [jsx("span", { className: `ds-sr-only`, id: id, children: srLabel }), jsx(ValidationMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
-};
-CharacterCounter.displayName = 'CharacterCounter';
-
-export { CharacterCounter };

package/dist/esm/components/form/Checkbox/CheckboxGroup.js

@@ -1,28 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { createContext, forwardRef, useState } from 'react';
-import { Fieldset } from '../Fieldset/Fieldset.js';
-
-const CheckboxGroupContext = createContext(null);
-const CheckboxGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, size = 'md', ...rest }, ref) => {
-    const [internalValue, setInternalValue] = useState(defaultValue ?? []);
-    const toggleValue = (checkboxValue) => {
-        const currentValue = value ?? internalValue;
-        const updatedValue = currentValue.includes(checkboxValue)
-            ? currentValue.filter((x) => x !== checkboxValue)
-            : [...currentValue, checkboxValue];
-        if (typeof value !== 'undefined' || value !== null) {
-            setInternalValue(updatedValue);
-        }
-        onChange?.(updatedValue);
-    };
-    return (jsx(Fieldset, { readOnly: readOnly, size: size, ref: ref, ...rest, children: jsx(CheckboxGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                toggleValue,
-            }, children: jsx("div", { className: cl('ds-checkbox__group', `ds-checkbox__group--${size}`), children: children }) }) }));
-});
-CheckboxGroup.displayName = 'CheckboxGroup';
-
-export { CheckboxGroup, CheckboxGroupContext };

package/dist/esm/components/form/Checkbox/index.js

@@ -1,10 +0,0 @@
-'use client';
-import { Checkbox as Checkbox$1 } from './Checkbox.js';
-import { CheckboxGroup } from './CheckboxGroup.js';
-
-/** `<input> element with `type="checkbox"` used for selecting one option */
-const Checkbox = Checkbox$1;
-Checkbox.Group = CheckboxGroup;
-Checkbox.Group.displayName = 'Checkbox.Group';
-
-export { Checkbox, CheckboxGroup };

package/dist/esm/components/form/Checkbox/useCheckbox.js

@@ -1,42 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { useFormField } from '../useFormField.js';
-import { CheckboxGroupContext } from './CheckboxGroup.js';
-
-/** Handles props for `Checkbox` in context with `Checkbox.Group` (and `Fieldset`) */
-const useCheckbox = (props) => {
-    const checkboxGroup = useContext(CheckboxGroupContext);
-    const { inputProps, readOnly, ...rest } = useFormField(props, 'checkbox');
-    return {
-        ...rest,
-        readOnly,
-        inputProps: {
-            ...inputProps,
-            readOnly,
-            type: 'checkbox',
-            defaultChecked: checkboxGroup?.defaultValue
-                ? checkboxGroup?.defaultValue.includes(props.value)
-                : props.defaultChecked,
-            checked: checkboxGroup?.value
-                ? checkboxGroup?.value.includes(props.value)
-                : props.checked,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-                checkboxGroup?.toggleValue(props.value);
-            },
-        },
-    };
-};
-
-export { useCheckbox };

package/dist/esm/components/form/Radio/RadioGroup.js

@@ -1,20 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { createContext, forwardRef, useId } from 'react';
-import { Fieldset } from '../Fieldset/Fieldset.js';
-
-const RadioGroupContext = createContext(null);
-const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
-    const nameId = useId();
-    return (jsx(Fieldset, { readOnly: readOnly, size: size, className: className, ref: ref, ...rest, children: jsx(RadioGroupContext.Provider, { value: {
-                value,
-                defaultValue,
-                name: name ?? `radiogroup-name-${nameId}`,
-                onChange,
-                required,
-            }, children: jsx("div", { className: cl('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
-});
-RadioGroup.displayName = 'RadioGroup';
-
-export { RadioGroup, RadioGroupContext };

package/dist/esm/components/form/Radio/index.js

@@ -1,10 +0,0 @@
-'use client';
-import { Radio as Radio$1 } from './Radio.js';
-import { RadioGroup } from './RadioGroup.js';
-
-/** `<input> element with `type="radio"` used for selecting one option */
-const Radio = Radio$1;
-Radio.Group = RadioGroup;
-Radio.Group.displayName = 'Radio.Group';
-
-export { Radio, RadioGroup };

package/dist/esm/components/form/Radio/useRadio.js

@@ -1,44 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { useFormField } from '../useFormField.js';
-import { RadioGroupContext } from './RadioGroup.js';
-
-/** Handles props for `Radio` in context with `Radio.Group` (and `Fieldset`) */
-const useRadio = (props) => {
-    const radioGroup = useContext(RadioGroupContext);
-    const { inputProps, readOnly, ...rest } = useFormField(props, 'radio');
-    return {
-        ...rest,
-        readOnly,
-        inputProps: {
-            ...inputProps,
-            readOnly,
-            type: 'radio',
-            name: radioGroup?.name ?? props.name,
-            required: radioGroup?.required,
-            defaultChecked: radioGroup?.defaultValue
-                ? radioGroup?.defaultValue === props.value
-                : props.defaultChecked,
-            checked: radioGroup?.value
-                ? radioGroup?.value === props.value
-                : props.checked,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-                radioGroup?.onChange?.(props.value);
-            },
-        },
-    };
-};
-
-export { useRadio };

package/dist/esm/components/form/Search/useSearch.js

@@ -1,37 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
-import { useFormField } from '../useFormField.js';
-
-/** Handles props for `Search` in context with `Fieldset` */
-const useSearch = (props) => {
-    const fieldset = useContext(FieldsetContext);
-    const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'search');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        inputProps: {
-            ...inputProps,
-            type: 'search',
-            name: props.name ?? 'q',
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-export { useSearch };

package/dist/esm/components/form/Select/useSelect.js

@@ -1,47 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
-import { useFormField } from '../useFormField.js';
-
-/** Handles props for `Select` in context with `Fieldset` */
-const useSelect = (props) => {
-    const fieldset = useContext(FieldsetContext);
-    const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'select');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        selectProps: {
-            ...selectProps,
-            readOnly,
-            onClick: (event) => {
-                if (readOnly)
-                    return event.preventDefault();
-                props?.onClick?.(event);
-            },
-            onKeyDown: (event) => {
-                if (readOnly) {
-                    if (event.key === 'Tab')
-                        return;
-                    return event.preventDefault();
-                }
-                props?.onKeyDown?.(event);
-            },
-            onMouseDown: (event) => {
-                if (readOnly) {
-                    if (event.target instanceof HTMLElement)
-                        event.target.focus();
-                    return event.preventDefault();
-                }
-                props?.onMouseDown?.(event);
-            },
-            onChange: (event) => {
-                if (readOnly)
-                    return event.preventDefault();
-                props?.onChange?.(event);
-            },
-        },
-    };
-};
-
-export { useSelect };

package/dist/esm/components/form/Switch/useSwitch.js

@@ -1,44 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { CheckboxGroupContext } from '../Checkbox/CheckboxGroup.js';
-import { useFormField } from '../useFormField.js';
-
-/** Handles props for `Switch` in context with `Checkbox.Group` (and `Fieldset`) */
-const useSwitch = (props) => {
-    const checkboxGroup = useContext(CheckboxGroupContext);
-    const { inputProps, readOnly, ...rest } = useFormField(props, 'switch');
-    const propsValue = props.value || '';
-    return {
-        ...rest,
-        readOnly,
-        inputProps: {
-            ...inputProps,
-            readOnly,
-            type: 'checkbox',
-            role: 'switch',
-            defaultChecked: checkboxGroup?.defaultValue
-                ? checkboxGroup?.defaultValue.includes(propsValue)
-                : props.defaultChecked,
-            checked: checkboxGroup?.value
-                ? checkboxGroup?.value.includes(propsValue)
-                : props.checked,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-                checkboxGroup?.toggleValue(propsValue);
-            },
-        },
-    };
-};
-
-export { useSwitch };

package/dist/esm/components/form/Textarea/useTextarea.js

@@ -1,35 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
-import { useFormField } from '../useFormField.js';
-
-/** Handles props for `Textarea` in context with `Fieldset` */
-const useTextarea = (props) => {
-    const fieldset = useContext(FieldsetContext);
-    const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'textarea');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        textareaProps: {
-            ...inputProps,
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-export { useTextarea };

package/dist/esm/components/form/Textfield/useTextfield.js

@@ -1,35 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
-import { useFormField } from '../useFormField.js';
-
-/** Handles props for `Textfield` in context with `Fieldset` */
-const useTextfield = (props) => {
-    const fieldset = useContext(FieldsetContext);
-    const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'textfield');
-    return {
-        ...rest,
-        readOnly,
-        size,
-        inputProps: {
-            ...inputProps,
-            readOnly,
-            onClick: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onClick?.(e);
-            },
-            onChange: (e) => {
-                if (readOnly) {
-                    e.preventDefault();
-                    return;
-                }
-                props?.onChange?.(e);
-            },
-        },
-    };
-};
-
-export { useTextfield };