@digigov/react-core 2.0.0-8e254888 → 2.0.0-96651090

package/BackToTopContainer/index.js

@@ -1,32 +1,20 @@
-import React from "react";
+import react from "react";
 import clsx from "clsx";
-import { Base } from "@digigov/react-core/Base";
-const BackToTopContainer = React.forwardRef(function BackToTopContainer2({ className, persistent, children, ...props }, ref) {
-  return /* @__PURE__ */ React.createElement(
-    Base,
-    {
-      as: "div",
-      ref,
-      className: clsx(className, {
-        "ds-back-to-top": true,
-        "ds-back-to-top--persistent": persistent
-      }),
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
+import { Base } from "../Base/index.js";
+const BackToTopContainer_BackToTopContainer = /*#__PURE__*/ react.forwardRef(function({ className, persistent, children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(Base, {
+        as: "div",
+        ref: ref,
+        className: clsx(className, {
+            'ds-back-to-top': true,
+            'ds-back-to-top--persistent': persistent
+        }),
+        ...props
+    }, /*#__PURE__*/ react.createElement("div", {
         className: clsx({
-          "ds-back-to-top-content": true
+            'ds-back-to-top-content': true
         })
-      },
-      children
-    )
-  );
+    }, children));
 });
-var BackToTopContainer_default = BackToTopContainer;
-export {
-  BackToTopContainer,
-  BackToTopContainer_default as default
-};
-//# sourceMappingURL=index.js.map
+const src_BackToTopContainer = BackToTopContainer_BackToTopContainer;
+export { BackToTopContainer_BackToTopContainer as BackToTopContainer, src_BackToTopContainer as default };

package/BackToTopLimit/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps } from '@digigov/react-core/Base';
+import { BaseProps } from '../Base/index.js';
 export interface BackToTopLimitProps extends BaseProps<'div'> {
 }
 /**

package/BackToTopLimit/index.js

@@ -1,21 +1,13 @@
-import React from "react";
-import { Base } from "@digigov/react-core/Base";
-const BackToTopLimit = React.forwardRef(function BackToTopLimit2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ React.createElement(
-    Base,
-    {
-      as: "div",
-      id: "back-to-top-limit",
-      ref,
-      className,
-      ...props
-    },
-    children
-  );
+import react from "react";
+import { Base } from "../Base/index.js";
+const BackToTopLimit_BackToTopLimit = /*#__PURE__*/ react.forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(Base, {
+        as: "div",
+        id: "back-to-top-limit",
+        ref: ref,
+        className: className,
+        ...props
+    }, children);
 });
-var BackToTopLimit_default = BackToTopLimit;
-export {
-  BackToTopLimit,
-  BackToTopLimit_default as default
-};
-//# sourceMappingURL=index.js.map
+const src_BackToTopLimit = BackToTopLimit_BackToTopLimit;
+export { BackToTopLimit_BackToTopLimit as BackToTopLimit, src_BackToTopLimit as default };

package/BackToTopLink/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps } from '@digigov/react-core/Base';
+import { BaseProps } from '../Base/index.js';
 export interface BackToTopLinkProps extends BaseProps<'a'> {
 }
 /**

package/BackToTopLink/index.js

@@ -1,27 +1,21 @@
-import React from "react";
+import react from "react";
 import clsx from "clsx";
-import Base from "@digigov/react-core/Base";
-import { ArrowIcon } from "@digigov/react-icons";
-const BackToTopLink = React.forwardRef(function BackToTopLink2({ printHidden = true, className, children, ...props }, ref) {
-  return /* @__PURE__ */ React.createElement(
-    Base,
-    {
-      as: "a",
-      printHidden,
-      ref,
-      className: clsx(className, {
-        "ds-back-to-top-link": true
-      }),
-      tabIndex: 0,
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(ArrowIcon, { direction: "up", marginRight: 1 }),
-    children
-  );
+import Base from "../Base/index.js";
+import { ArrowIcon } from "@digigov/react-icons/index.js";
+const BackToTopLink_BackToTopLink = /*#__PURE__*/ react.forwardRef(function({ printHidden = true, className, children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(Base, {
+        as: "a",
+        printHidden: printHidden,
+        ref: ref,
+        className: clsx(className, {
+            'ds-back-to-top-link': true
+        }),
+        tabIndex: 0,
+        ...props
+    }, /*#__PURE__*/ react.createElement(ArrowIcon, {
+        direction: 'up',
+        marginRight: 1
+    }), children);
 });
-var BackToTopLink_default = BackToTopLink;
-export {
-  BackToTopLink,
-  BackToTopLink_default as default
-};
-//# sourceMappingURL=index.js.map
+const src_BackToTopLink = BackToTopLink_BackToTopLink;
+export { BackToTopLink_BackToTopLink as BackToTopLink, src_BackToTopLink as default };

package/BannerContainer/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps } from '@digigov/react-core/Base';
+import { BaseProps } from '../Base/index.js';
 export interface BannerContainerProps extends BaseProps<'div'> {
 }
 export declare const BannerContainer: React.ForwardRefExoticComponent<Omit<BannerContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/BannerContainer/index.js

@@ -1,23 +1,15 @@
-import React from "react";
+import react from "react";
 import clsx from "clsx";
-import { Base } from "@digigov/react-core/Base";
-const BannerContainer = React.forwardRef(function BannerContainer2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ React.createElement(
-    Base,
-    {
-      as: "div",
-      ref,
-      className: clsx(className, {
-        "ds-cookie-banner": true
-      }),
-      ...props
-    },
-    children
-  );
+import { Base } from "../Base/index.js";
+const BannerContainer_BannerContainer = /*#__PURE__*/ react.forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(Base, {
+        as: "div",
+        ref: ref,
+        className: clsx(className, {
+            'ds-banner-container': true
+        }),
+        ...props
+    }, children);
 });
-var BannerContainer_default = BannerContainer;
-export {
-  BannerContainer,
-  BannerContainer_default as default
-};
-//# sourceMappingURL=index.js.map
+const src_BannerContainer = BannerContainer_BannerContainer;
+export { BannerContainer_BannerContainer as BannerContainer, src_BannerContainer as default };

package/Base/compat/Input/CheckboxInput.native.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { TouchableOpacity, View } from "react-native";
+const CheckboxInput_native_CheckboxInput = /*#__PURE__*/ react.forwardRef(function({ checked, value, onChange, ...props }, ref) {
+    const handlePress = ()=>{
+        if (onChange) {
+            const syntheticEvent = {
+                currentTarget: {
+                    value,
+                    checked: !checked
+                }
+            };
+            onChange(syntheticEvent);
+        }
+    };
+    return /*#__PURE__*/ react.createElement(TouchableOpacity, {
+        ref: ref,
+        onPress: handlePress,
+        ...props
+    }, checked && /*#__PURE__*/ react.createElement(View, {
+        className: "ds-checkboxes__input--checked"
+    }));
+});
+const CheckboxInput_native = CheckboxInput_native_CheckboxInput;
+export { CheckboxInput_native_CheckboxInput as CheckboxInput, CheckboxInput_native as default };

package/Base/compat/Input/RadioInput.native.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { TouchableOpacity, View } from "react-native";
+const RadioInput_native_RadioInput = /*#__PURE__*/ react.forwardRef(function({ value, checked, onChange, ...props }, ref) {
+    const handlePress = ()=>{
+        if (onChange) {
+            const syntheticEvent = {
+                target: {
+                    value: value,
+                    checked: true
+                }
+            };
+            onChange(syntheticEvent);
+        }
+    };
+    return /*#__PURE__*/ react.createElement(TouchableOpacity, {
+        ref: ref,
+        onPress: handlePress,
+        ...props
+    }, checked && /*#__PURE__*/ react.createElement(View, {
+        className: "ds-radios__input--checked"
+    }));
+});
+const RadioInput_native = RadioInput_native_RadioInput;
+export { RadioInput_native_RadioInput as RadioInput, RadioInput_native as default };

package/Base/compat/Input/StringInput.native.js

@@ -0,0 +1,79 @@
+import react, { useEffect, useMemo } from "react";
+import { TextInput } from "react-native";
+const StringInput_native_StringInput = /*#__PURE__*/ react.forwardRef(function({ 'data-type': dataType, onChange, onBlur, onFocus, value, maxLength, multiline, rows, disabled, ...props }, ref) {
+    const [currentValue, setValue] = react.useState(value);
+    const keyboardType = useMemo(()=>{
+        switch(dataType){
+            case 'afm':
+                return 'number-pad';
+            case 'phone_number':
+                return 'phone-pad';
+            case 'mobile_phone':
+                return 'phone-pad';
+            case 'postal_code':
+                return 'number-pad';
+            case 'int':
+                return 'numeric';
+            case 'email':
+                return 'email-address';
+            default:
+                return 'default';
+        }
+    }, [
+        dataType
+    ]);
+    useEffect(()=>{
+        if (currentValue !== value) handleChange();
+    }, [
+        currentValue
+    ]);
+    useEffect(()=>{
+        if (currentValue !== value) setValue(value);
+    }, [
+        value
+    ]);
+    const handleChange = ()=>{
+        if (onChange) {
+            const syntheticEvent = {
+                target: {
+                    value: currentValue
+                }
+            };
+            onChange(syntheticEvent);
+        }
+    };
+    const handleBlur = ()=>{
+        if (onBlur) {
+            const syntheticEvent = {
+                target: {
+                    value: currentValue
+                }
+            };
+            onBlur(syntheticEvent);
+        }
+    };
+    const handleFocus = ()=>{
+        if (onFocus) {
+            const syntheticEvent = {
+                target: {
+                    value: currentValue
+                }
+            };
+            onFocus(syntheticEvent);
+        }
+    };
+    return /*#__PURE__*/ react.createElement(TextInput, {
+        ref: ref,
+        onChangeText: setValue,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        value: currentValue,
+        multiline: multiline,
+        rows: rows,
+        editable: !disabled,
+        maxLength: Number(maxLength) || void 0,
+        keyboardType: keyboardType,
+        ...props
+    });
+});
+export { StringInput_native_StringInput as StringInput };

package/Base/compat/Input/index.native.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { CheckboxInputProps } from '@digigov/react-core/Base/compat/Input/CheckboxInput.native';
-import { RadioInputProps } from '@digigov/react-core/Base/compat/Input/RadioInput.native';
-import { StringInputProps } from '@digigov/react-core/Base/compat/Input/StringInput.native';
+import { CheckboxInputProps } from './CheckboxInput.native.js';
+import { RadioInputProps } from './RadioInput.native.js';
+import { StringInputProps } from './StringInput.native.js';
 type InputProps = RadioInputProps | CheckboxInputProps | StringInputProps;
 export declare const BaseInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default BaseInput;

package/Base/compat/Input/index.native.js

@@ -0,0 +1,25 @@
+import react from "react";
+import CheckboxInput_native from "./CheckboxInput.native.js";
+import RadioInput_native from "./RadioInput.native.js";
+import { StringInput } from "./StringInput.native.js";
+const index_native_BaseInput = /*#__PURE__*/ react.forwardRef(function(props, ref) {
+    switch(props.type){
+        case 'radio':
+            return /*#__PURE__*/ react.createElement(RadioInput_native, {
+                ref: ref,
+                ...props
+            });
+        case 'checkbox':
+            return /*#__PURE__*/ react.createElement(CheckboxInput_native, {
+                ref: ref,
+                ...props
+            });
+        default:
+            return /*#__PURE__*/ react.createElement(StringInput, {
+                ref: ref,
+                ...props
+            });
+    }
+});
+const index_native = index_native_BaseInput;
+export { index_native_BaseInput as BaseInput, index_native as default };

package/Base/compat/button.native.js

@@ -0,0 +1,36 @@
+import react, { useContext } from "react";
+import { Pressable } from "react-native";
+import { FormContext } from "@digigov/form/FormContext";
+const button_native_FormButton = /*#__PURE__*/ react.forwardRef(function({ onClick, ...props }, ref) {
+    const formContext = useContext(FormContext);
+    return /*#__PURE__*/ react.createElement(button_native_CompatButton, {
+        ref: ref,
+        ...props,
+        onClick: ()=>{
+            if (onClick) onClick({});
+            if (props.type) formContext?.[props.type]();
+        }
+    });
+});
+const button_native_CompatButton = /*#__PURE__*/ react.forwardRef(function({ onClick, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(Pressable, {
+        onPress: onClick,
+        ref: ref,
+        hitSlop: 10,
+        ...props
+    });
+});
+const button_native_Button = /*#__PURE__*/ react.forwardRef(function(props, ref) {
+    if (props.type && [
+        'submit',
+        'reset'
+    ].includes(props.type)) return /*#__PURE__*/ react.createElement(button_native_FormButton, {
+        ref: ref,
+        ...props
+    });
+    return /*#__PURE__*/ react.createElement(button_native_CompatButton, {
+        ref: ref,
+        ...props
+    });
+});
+export { button_native_Button as Button, button_native_CompatButton as CompatButton, button_native_FormButton as FormButton };

package/Base/compat/details.native.js

@@ -0,0 +1,29 @@
+import react, { Children, useEffect, useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+const CompatDetails = ({ children, open = false, placement, closeIcon, openIcon, iconClassName, ...props })=>{
+    const [isExpanded, setIsExpanded] = useState(open);
+    useEffect(()=>{
+        setIsExpanded(open);
+    }, [
+        open
+    ]);
+    const toggleExpand = ()=>{
+        setIsExpanded(!isExpanded);
+    };
+    const [summaryContent, ...detailsContent] = Children.toArray(children);
+    const toggleIcon = closeIcon && openIcon ? /*#__PURE__*/ react.createElement(Text, {
+        className: iconClassName
+    }, isExpanded ? openIcon : closeIcon) : null;
+    return /*#__PURE__*/ react.createElement(View, props, /*#__PURE__*/ react.createElement(TouchableOpacity, {
+        onPress: toggleExpand,
+        style: styles.summaryContainer
+    }, 'before' === placement && toggleIcon, summaryContent, 'after' === placement && toggleIcon), isExpanded && /*#__PURE__*/ react.createElement(View, null, detailsContent));
+};
+const styles = StyleSheet.create({
+    summaryContainer: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    }
+});
+const details_native = CompatDetails;
+export { details_native as default };

package/Base/compat/li.native.js

@@ -0,0 +1,4 @@
+import react from "react";
+import { View } from "react-native";
+const Li = (props)=>/*#__PURE__*/ react.createElement(View, props);
+export { Li };

package/Base/compat/ol.native.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { Text, View } from "react-native";
+const Ol = ({ children, className, ...props })=>{
+    let listStyle = 'none';
+    if (className.includes('ds-list--bullet')) listStyle = 'bullet';
+    if (className.includes('ds-list--number')) listStyle = 'number';
+    return /*#__PURE__*/ react.createElement(View, {
+        ...props,
+        className: className
+    }, Array.isArray(children) ? children.map((child, index)=>{
+        const counter = 'number' === listStyle ? index + 1 : 'bullet' === listStyle ? '•' : null;
+        return /*#__PURE__*/ react.createElement(View, {
+            key: index,
+            style: {
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'nowrap',
+                gap: 8,
+                width: '100%'
+            }
+        }, /*#__PURE__*/ react.createElement(Text, null, counter), child);
+    }) : children);
+};
+export { Ol };

package/Base/index.d.ts

@@ -1,2 +1,2 @@
-export * from '@digigov/react-core/Base/index.web';
-export { default as default } from '@digigov/react-core/Base/index.web';
+export * from './index.web.js';
+export { default as default } from './index.web.js';

package/Base/index.js

@@ -1,6 +1,3 @@
-export * from "@digigov/react-core/Base/index.web";
-import { default as default2 } from "@digigov/react-core/Base/index.web";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+import index_web from "./index.web.js";
+export * from "./index.web.js";
+export { index_web as default };

package/Base/index.native.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
+import { BaseProps as CoreBaseProps } from './index.web.js';
 export type BaseProps<C extends React.ElementType> = CoreBaseProps<C> & ViewProps;
 export type BaseComponent = <C extends React.ElementType = 'span'>(props: BaseProps<C>) => React.ReactNode | null;
 export declare const Base: BaseComponent;

package/Base/index.native.js

@@ -0,0 +1,111 @@
+import react, { useMemo } from "react";
+import { Text, View } from "react-native";
+import { mapping } from "./mapping.native.js";
+import { basePropGenerator } from "./utils.js";
+import { wrap } from "./wrap.native.js";
+const BooleanMapper = {
+    true: true,
+    false: false,
+    undefined: false,
+    null: false,
+    '': false
+};
+const textHtmlTags = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'p',
+    'span'
+];
+const index_native_Base = /*#__PURE__*/ react.forwardRef(function({ as, display, children, margin, marginTop, marginBottom, marginLeft, marginRight, m, mt, mb, ml, mr, mx, my, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, p, pt, pb, pr, pl, px, py, printHidden, printVisible, hidden, xsUpHidden, smUpHidden, mdUpHidden, lgUpHidden, xlUpHidden, xsHidden, smHidden, mdHidden, lgHidden, xlHidden, className, 'aria-expanded': ariaExpanded, ...props }, ref) {
+    const classNames = className?.split(' ') || [];
+    let applyBasePropsToWrapper = true;
+    const basePropToClassName = basePropGenerator({
+        display,
+        margin,
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+        m,
+        mt,
+        mb,
+        ml,
+        mr,
+        mx,
+        my,
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        p,
+        pt,
+        pb,
+        pr,
+        pl,
+        px,
+        py,
+        printHidden,
+        printVisible,
+        hidden,
+        xsUpHidden,
+        smUpHidden,
+        mdUpHidden,
+        lgUpHidden,
+        xlUpHidden,
+        xsHidden,
+        smHidden,
+        mdHidden,
+        lgHidden,
+        xlHidden
+    });
+    if ('string' == typeof children) children = [
+        children
+    ];
+    if (Array.isArray(children)) {
+        const textClassNames = classNames?.map((className)=>`${className}__text`).join(' ');
+        children = children.map((child, index)=>{
+            if (Array.isArray(child)) return child.map((child, index)=>{
+                if ('string' == typeof child) return /*#__PURE__*/ react.createElement(Text, {
+                    key: index,
+                    className: textClassNames
+                }, child);
+                return child;
+            });
+            if ('string' == typeof child) {
+                if (as && textHtmlTags.includes(as)) applyBasePropsToWrapper = false;
+                return /*#__PURE__*/ react.createElement(Text, {
+                    key: index,
+                    className: applyBasePropsToWrapper ? textClassNames : `${textClassNames} ${basePropToClassName}`,
+                    ...props.onClick && {
+                        onPress: props.onClick
+                    }
+                }, child);
+            }
+            return child;
+        });
+    }
+    const Component = useMemo(()=>{
+        const C = mapping[as] || View;
+        if (classNames.find((className)=>className.match(/__wrapper|__before|__after$/))) return wrap(C);
+        return C;
+    }, [
+        className
+    ]);
+    Object.keys(props).forEach((k)=>{
+        if (k.startsWith('aria')) {
+            if (void 0 !== BooleanMapper[props[k]]) props[k] = BooleanMapper[props[k]];
+        }
+    });
+    return /*#__PURE__*/ react.createElement(Component, {
+        ...props,
+        ref: ref,
+        "aria-expanded": 'false' === ariaExpanded ? false : true === ariaExpanded ? true : void 0,
+        className: applyBasePropsToWrapper ? `${basePropToClassName} ${className}` : className
+    }, children);
+});
+const index_native = index_native_Base;
+export { index_native_Base as Base, index_native as default };

package/Base/index.web.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface AsProp<C extends React.ElementType> {
-    as?: C;
+    as?: C | React.ElementType<any>;
 }
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 type PolymorphicComponentProp<C extends React.ElementType, Props = Record<string, unknown>> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;

package/Base/index.web.js

@@ -0,0 +1,53 @@
+import react from "react";
+import clsx from "clsx";
+import { basePropGenerator } from "./utils.js";
+const index_web_Base = /*#__PURE__*/ react.forwardRef(function({ as, display, margin, marginTop, marginBottom, marginLeft, marginRight, m, mt, mb, ml, mr, mx, my, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, p, pt, pb, pr, pl, px, py, printHidden, printVisible, hidden, xsUpHidden, smUpHidden, mdUpHidden, lgUpHidden, xlUpHidden, xsHidden, smHidden, mdHidden, lgHidden, xlHidden, children, className, ...props }, ref) {
+    const Component = as || 'span';
+    const basePropToClassName = basePropGenerator({
+        display,
+        margin,
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+        m,
+        mt,
+        mb,
+        ml,
+        mr,
+        mx,
+        my,
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        p,
+        pt,
+        pb,
+        pr,
+        pl,
+        px,
+        py,
+        printHidden,
+        printVisible,
+        hidden,
+        xsUpHidden,
+        smUpHidden,
+        mdUpHidden,
+        lgUpHidden,
+        xlUpHidden,
+        xsHidden,
+        smHidden,
+        mdHidden,
+        lgHidden,
+        xlHidden
+    });
+    return /*#__PURE__*/ react.createElement(Component, {
+        className: clsx(basePropToClassName, className),
+        ref: ref,
+        ...props
+    }, children);
+});
+const index_web = index_web_Base;
+export { index_web_Base as Base, index_web as default };