@dnb/eufemia 10.20.0 → 10.22.0

package/es/components/height-animation/useHeightAnimation.js

@@ -54,7 +54,9 @@ export function useHeightAnimation(targetRef, {
           setIsAnimating(true);
           break;
       }
-      onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart(state);
+      if (!isInitialRenderRef.current) {
+        onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart(state);
+      }
     });
     instRef.current.onEnd(state => {
       switch (state) {
@@ -92,7 +94,7 @@ export function useHeightAnimation(targetRef, {
     isInitialRenderRef,
     targetRef
   });
-  const firstPaintStyle = open && !isVisible && !isAnimating && ((_instRef$current2 = instRef.current) === null || _instRef$current2 === void 0 ? void 0 : _instRef$current2.firstPaintStyle()) || {};
+  const firstPaintStyle = open && !isVisible && !isAnimating && ((_instRef$current2 = instRef.current) === null || _instRef$current2 === void 0 ? void 0 : _instRef$current2.firstPaintStyle) || {};
   const isInDOM = open || isVisible;
   return {
     open,
@@ -110,6 +112,7 @@ function useOpenClose({
   isInitialRenderRef,
   targetRef
 }) {
+  const isTest = typeof process !== 'undefined' && process.env.NODE_ENV === 'test' && typeof globalThis.IS_TEST === 'undefined';
   useLayoutEffect(() => {
     instRef.current.setElement(targetRef.current);
     if (!targetRef.current || instRef.current.state === 'init' && isInitialRenderRef.current) {
@@ -118,21 +121,19 @@ function useOpenClose({
       } else {
         instRef.current.setAsClosed();
       }
-    }
-  }, [open, targetRef, instRef, isInitialRenderRef]);
-  const isTest = typeof process !== 'undefined' && process.env.NODE_ENV === 'test' && typeof globalThis.IS_TEST === 'undefined';
-  useLayoutEffect(() => {
-    if (open) {
-      instRef.current.open();
     } else {
-      instRef.current.close();
+      if (open) {
+        instRef.current.open();
+      } else {
+        instRef.current.close();
+      }
     }
     if (isTest) {
       var _targetRef$current;
       const event = new CustomEvent('transitionend');
       (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.dispatchEvent(event);
     }
-  }, [open, instRef, isInitialRenderRef, targetRef, isTest]);
+  }, [open, targetRef, instRef, isInitialRenderRef, isTest]);
   useLayoutEffect(() => {
     const run = () => {
       isInitialRenderRef.current = false;

package/es/components/height-animation/useHeightAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHeightAnimation.js","names":["React","useMemo","useRef","useState","HeightAnimationInstance","useLayoutEffect","window","useEffect","useHeightAnimation","targetRef","open","animate","children","onInit","onOpen","onAnimationStart","onAnimationEnd","_instRef$current2","instRef","isInitialRenderRef","globalThis","readjustTime","isOpen","setIsOpen","isVisible","setIsVisible","isAnimating","setIsAnimating","isVisibleParallax","setParallax","current","_instRef$current","remove","setOptions","global","IS_TEST","onStart","state","onEnd","useOpenClose","useAdjust","firstPaintStyle","isInDOM","setElement","setAsOpen","setAsClosed","isTest","process","env","NODE_ENV","close","_targetRef$current","event","CustomEvent","dispatchEvent","run","bypassTime","_window$requestAnimat","_window","requestAnimationFrame","call","fromHeight","timer","Date","now","shouldAdjust","_instRef$current3","_instRef$current4","getHeight","elem","style","height","toHeight","adjustTo"],"sources":["../../../../src/components/height-animation/useHeightAnimation.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react'\nimport HeightAnimationInstance from './HeightAnimationInstance'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type useHeightAnimationOptions = {\n  /**\n   * Set to `true`, when initially `false` was given, to animate from 0px to auto.\n   * Default: true\n   */\n  open?: boolean\n\n  /**\n   * Set to `false` to omit the animation.\n   * Default: true\n   */\n  animate?: boolean\n\n  /**\n   * In order to let the Hook know when children has changed\n   */\n  children?: React.ReactNode | HTMLElement\n\n  /**\n   * Is called once before mounting the component (useLayoutEffect)\n   */\n  onInit?: (instance: HeightAnimationInstance) => void\n\n  /**\n   * Is called when fully opened or closed\n   */\n  onOpen?: (isOpen: boolean) => void\n\n  /**\n   * Is called when animation has started.\n   */\n  onAnimationStart?: (state: HeightAnimationOnStartTypes) => void\n\n  /**\n   * Is called when animation is done and the full height is reached.\n   */\n  onAnimationEnd?: (state: HeightAnimationOnEndTypes) => void\n}\n\nexport type HeightAnimationOnStartTypes =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\n\nexport type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted'\n\nexport function useHeightAnimation(\n  targetRef: React.RefObject<HTMLElement>,\n  {\n    open = true,\n    animate = true,\n    children = null,\n    onInit = null,\n    onOpen = null,\n    onAnimationStart = null,\n    onAnimationEnd = null,\n  }: useHeightAnimationOptions = {}\n) {\n  const instRef = useRef<HeightAnimationInstance>(null)\n  const isInitialRenderRef = useRef(\n    typeof globalThis !== 'undefined'\n      ? globalThis.readjustTime !== -1\n      : true\n  )\n\n  const [isOpen, setIsOpen] = useState(open)\n  const [isVisible, setIsVisible] = useState(false)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [isVisibleParallax, setParallax] = useState(open)\n\n  useLayoutEffect(() => {\n    instRef.current = new HeightAnimationInstance()\n    onInit?.(instRef.current)\n    return () => {\n      instRef.current?.remove()\n      instRef.current = null\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    instRef.current.setOptions({ animate })\n\n    if (typeof global !== 'undefined' && globalThis.IS_TEST) {\n      instRef.current.setOptions({ animate: false })\n    }\n  }, [animate])\n\n  useLayoutEffect(() => {\n    instRef.current.onStart((state: HeightAnimationOnStartTypes) => {\n      switch (state) {\n        case 'opening':\n          setIsVisible(true)\n          setParallax(true)\n          setIsAnimating(true)\n          break\n\n        case 'closing':\n          setParallax(false)\n          setIsAnimating(true)\n          break\n\n        case 'adjusting':\n          setIsAnimating(true)\n          break\n      }\n\n      onAnimationStart?.(state)\n    })\n\n    instRef.current.onEnd((state: HeightAnimationOnEndTypes) => {\n      switch (state) {\n        case 'opened':\n          setIsVisible(true)\n          setIsOpen(true)\n          setIsAnimating(false)\n          onOpen?.(true)\n          break\n\n        case 'closed':\n          setIsVisible(false)\n          setIsOpen(false)\n          setParallax(false)\n          setIsAnimating(false)\n          onOpen?.(false)\n          break\n\n        case 'adjusted':\n          setIsAnimating(false)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        onAnimationEnd?.(state)\n      }\n    })\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useOpenClose({ open, instRef, isInitialRenderRef, targetRef })\n  useAdjust({ children, instRef, isInitialRenderRef, targetRef })\n\n  /**\n   * Returns the first paint style, to be used for the initial render,\n   * to avoid flickering.\n   */\n  const firstPaintStyle = ((open &&\n    !isVisible &&\n    !isAnimating &&\n    instRef.current?.firstPaintStyle()) ||\n    {}) as React.CSSProperties\n  const isInDOM = open || isVisible\n\n  return {\n    open,\n    isOpen,\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  }\n}\n\nfunction useOpenClose({ open, instRef, isInitialRenderRef, targetRef }) {\n  useLayoutEffect(() => {\n    instRef.current.setElement(targetRef.current)\n\n    if (\n      !targetRef.current ||\n      (instRef.current.state === 'init' && isInitialRenderRef.current)\n    ) {\n      if (open) {\n        instRef.current.setAsOpen()\n      } else {\n        instRef.current.setAsClosed()\n      }\n    }\n  }, [open, targetRef, instRef, isInitialRenderRef])\n\n  const isTest =\n    typeof process !== 'undefined' &&\n    process.env.NODE_ENV === 'test' &&\n    typeof globalThis.IS_TEST === 'undefined'\n\n  useLayoutEffect(() => {\n    if (open) {\n      instRef.current.open()\n    } else {\n      instRef.current.close()\n    }\n\n    // For testing purposes, we need to trigger the transitionend event\n    if (isTest) {\n      const event = new CustomEvent('transitionend')\n      targetRef.current?.dispatchEvent(event)\n    }\n  }, [open, instRef, isInitialRenderRef, targetRef, isTest])\n\n  useLayoutEffect(() => {\n    const run = () => {\n      isInitialRenderRef.current = false\n    }\n    if (globalThis.bypassTime === -1 || isTest) {\n      run()\n    } else {\n      window.requestAnimationFrame?.(run)\n    }\n  }, [isInitialRenderRef, isTest])\n}\n\nfunction useAdjust({ children, instRef, isInitialRenderRef, targetRef }) {\n  const fromHeight = useRef(0)\n\n  const [timer] = useState(() => Date.now())\n\n  /**\n   * Wait for some criteria and a certain time, before we adjust the height,\n   * so it will not run when a open/close animation is running.\n   */\n  const shouldAdjust = () => {\n    switch (instRef.current?.state) {\n      case 'opened':\n      case 'adjusted':\n      case 'adjusting':\n        return (\n          !isInitialRenderRef.current &&\n          Date.now() - timer > (globalThis.readjustTime || 100)\n        )\n    }\n\n    return false\n  }\n\n  useMemo(() => {\n    if (shouldAdjust()) {\n      fromHeight.current = instRef.current?.getHeight()\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    if (shouldAdjust()) {\n      /**\n       * In certain cases, the targetRef.current is outdated, so we need to set it again.\n       * E.g. in Tabs.js, when we switch tabs, the targetRef.current is not updated.\n       */\n      instRef.current.setElement(targetRef.current)\n\n      /**\n       * Ensure we don't have height, while we get the \"toHeight\" again.\n       * We may move this inside of the HeightAnimationInstance class later,\n       * but the \"GlobalStatus\" is currently relying on \"getUnknownHeight\" inside of adjustTo.\n       */\n      instRef.current.elem.style.height = ''\n\n      /**\n       * Use getHeight instead of getUnknownHeight because of the additional,\n       * disturbing DOM manipulation.\n       */\n      const toHeight = instRef.current.getHeight()\n\n      instRef.current.adjustTo(fromHeight.current, toHeight)\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"mappings":"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"}
+{"version":3,"file":"useHeightAnimation.js","names":["React","useMemo","useRef","useState","HeightAnimationInstance","useLayoutEffect","window","useEffect","useHeightAnimation","targetRef","open","animate","children","onInit","onOpen","onAnimationStart","onAnimationEnd","_instRef$current2","instRef","isInitialRenderRef","globalThis","readjustTime","isOpen","setIsOpen","isVisible","setIsVisible","isAnimating","setIsAnimating","isVisibleParallax","setParallax","current","_instRef$current","remove","setOptions","global","IS_TEST","onStart","state","onEnd","useOpenClose","useAdjust","firstPaintStyle","isInDOM","isTest","process","env","NODE_ENV","setElement","setAsOpen","setAsClosed","close","_targetRef$current","event","CustomEvent","dispatchEvent","run","bypassTime","_window$requestAnimat","_window","requestAnimationFrame","call","fromHeight","timer","Date","now","shouldAdjust","_instRef$current3","_instRef$current4","getHeight","elem","style","height","toHeight","adjustTo"],"sources":["../../../../src/components/height-animation/useHeightAnimation.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react'\nimport HeightAnimationInstance from './HeightAnimationInstance'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type useHeightAnimationOptions = {\n  /**\n   * Set to `true`, when initially `false` was given, to animate from 0px to auto.\n   * Default: true\n   */\n  open?: boolean\n\n  /**\n   * Set to `false` to omit the animation.\n   * Default: true\n   */\n  animate?: boolean\n\n  /**\n   * In order to let the Hook know when children has changed\n   */\n  children?: React.ReactNode | HTMLElement\n\n  /**\n   * Is called once before mounting the component (useLayoutEffect)\n   */\n  onInit?: (instance: HeightAnimationInstance) => void\n\n  /**\n   * Is called when fully opened or closed\n   */\n  onOpen?: (isOpen: boolean) => void\n\n  /**\n   * Is called when animation has started.\n   */\n  onAnimationStart?: (state: HeightAnimationOnStartTypes) => void\n\n  /**\n   * Is called when animation is done and the full height is reached.\n   */\n  onAnimationEnd?: (state: HeightAnimationOnEndTypes) => void\n}\n\nexport type HeightAnimationOnStartTypes =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\n\nexport type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted'\n\nexport function useHeightAnimation(\n  targetRef: React.RefObject<HTMLElement>,\n  {\n    open = true,\n    animate = true,\n    children = null,\n    onInit = null,\n    onOpen = null,\n    onAnimationStart = null,\n    onAnimationEnd = null,\n  }: useHeightAnimationOptions = {}\n) {\n  const instRef = useRef<HeightAnimationInstance>(null)\n  const isInitialRenderRef = useRef(\n    typeof globalThis !== 'undefined'\n      ? globalThis.readjustTime !== -1\n      : true\n  )\n\n  const [isOpen, setIsOpen] = useState(open)\n  const [isVisible, setIsVisible] = useState(false)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [isVisibleParallax, setParallax] = useState(open)\n\n  useLayoutEffect(() => {\n    instRef.current = new HeightAnimationInstance()\n    onInit?.(instRef.current)\n    return () => {\n      instRef.current?.remove()\n      instRef.current = null\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    instRef.current.setOptions({ animate })\n\n    if (typeof global !== 'undefined' && globalThis.IS_TEST) {\n      instRef.current.setOptions({ animate: false })\n    }\n  }, [animate])\n\n  useLayoutEffect(() => {\n    instRef.current.onStart((state: HeightAnimationOnStartTypes) => {\n      switch (state) {\n        case 'opening':\n          setIsVisible(true)\n          setParallax(true)\n          setIsAnimating(true)\n          break\n\n        case 'closing':\n          setParallax(false)\n          setIsAnimating(true)\n          break\n\n        case 'adjusting':\n          setIsAnimating(true)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        onAnimationStart?.(state)\n      }\n    })\n\n    instRef.current.onEnd((state: HeightAnimationOnEndTypes) => {\n      switch (state) {\n        case 'opened':\n          setIsVisible(true)\n          setIsOpen(true)\n          setIsAnimating(false)\n          onOpen?.(true)\n          break\n\n        case 'closed':\n          setIsVisible(false)\n          setIsOpen(false)\n          setParallax(false)\n          setIsAnimating(false)\n          onOpen?.(false)\n          break\n\n        case 'adjusted':\n          setIsAnimating(false)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        onAnimationEnd?.(state)\n      }\n    })\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useOpenClose({ open, instRef, isInitialRenderRef, targetRef })\n  useAdjust({ children, instRef, isInitialRenderRef, targetRef })\n\n  /**\n   * Returns the first paint style, to be used for the initial render,\n   * to avoid flickering.\n   */\n  const firstPaintStyle = ((open &&\n    !isVisible &&\n    !isAnimating &&\n    instRef.current?.firstPaintStyle) ||\n    {}) as React.CSSProperties\n  const isInDOM = open || isVisible\n\n  return {\n    open,\n    isOpen,\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  }\n}\n\nfunction useOpenClose({ open, instRef, isInitialRenderRef, targetRef }) {\n  const isTest =\n    typeof process !== 'undefined' &&\n    process.env.NODE_ENV === 'test' &&\n    typeof globalThis.IS_TEST === 'undefined'\n\n  useLayoutEffect(() => {\n    instRef.current.setElement(targetRef.current)\n\n    if (\n      !targetRef.current ||\n      (instRef.current.state === 'init' && isInitialRenderRef.current)\n    ) {\n      if (open) {\n        instRef.current.setAsOpen()\n      } else {\n        instRef.current.setAsClosed()\n      }\n    } else {\n      if (open) {\n        instRef.current.open()\n      } else {\n        instRef.current.close()\n      }\n    }\n\n    // For testing purposes, we need to trigger the transitionend event\n    if (isTest) {\n      const event = new CustomEvent('transitionend')\n      targetRef.current?.dispatchEvent(event)\n    }\n  }, [open, targetRef, instRef, isInitialRenderRef, isTest])\n\n  useLayoutEffect(() => {\n    const run = () => {\n      isInitialRenderRef.current = false\n    }\n    if (globalThis.bypassTime === -1 || isTest) {\n      run()\n    } else {\n      window.requestAnimationFrame?.(run)\n    }\n  }, [isInitialRenderRef, isTest])\n}\n\nfunction useAdjust({ children, instRef, isInitialRenderRef, targetRef }) {\n  const fromHeight = useRef(0)\n\n  const [timer] = useState(() => Date.now())\n\n  /**\n   * Wait for some criteria and a certain time, before we adjust the height,\n   * so it will not run when a open/close animation is running.\n   */\n  const shouldAdjust = () => {\n    switch (instRef.current?.state) {\n      case 'opened':\n      case 'adjusted':\n      case 'adjusting':\n        return (\n          !isInitialRenderRef.current &&\n          Date.now() - timer > (globalThis.readjustTime || 100)\n        )\n    }\n\n    return false\n  }\n\n  useMemo(() => {\n    if (shouldAdjust()) {\n      fromHeight.current = instRef.current?.getHeight()\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    if (shouldAdjust()) {\n      /**\n       * In certain cases, the targetRef.current is outdated, so we need to set it again.\n       * E.g. in Tabs.js, when we switch tabs, the targetRef.current is not updated.\n       */\n      instRef.current.setElement(targetRef.current)\n\n      /**\n       * Ensure we don't have height, while we get the \"toHeight\" again.\n       * We may move this inside of the HeightAnimationInstance class later,\n       * but the \"GlobalStatus\" is currently relying on \"getUnknownHeight\" inside of adjustTo.\n       */\n      instRef.current.elem.style.height = ''\n\n      /**\n       * Use getHeight instead of getUnknownHeight because of the additional,\n       * disturbing DOM manipulation.\n       */\n      const toHeight = instRef.current.getHeight()\n\n      instRef.current.adjustTo(fromHeight.current, toHeight)\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"mappings":"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"}

package/es/components/info-card/InfoCard.d.ts

@@ -15,6 +15,11 @@ export interface InfoCardProps {
      * Default: false
      */
     centered?: boolean;
+    /**
+     * Determines whether to display a drop shadow around the card.
+     * Default: true
+     */
+    dropShadow?: boolean;
     /**
      * Replace the default icon with custom icon.
      * Default: Lightbulb (icon)
@@ -79,6 +84,7 @@ export interface InfoCardProps {
 export type InfoCardAllProps = InfoCardProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & SpacingProps;
 export declare const defaultProps: {
     centered: boolean;
+    dropShadow: boolean;
     skeleton: boolean;
     icon: (props: any) => import("react/jsx-runtime").JSX.Element;
 };

package/es/components/info-card/InfoCard.js

@@ -3,7 +3,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["alt", "centered", "title", "skeleton", "className", "icon", "src", "imgProps", "text", "onClose", "onAccept", "closeButtonText", "acceptButtonText", "closeButtonAttributes", "acceptButtonAttributes"];
+const _excluded = ["alt", "centered", "dropShadow", "title", "skeleton", "className", "icon", "src", "imgProps", "text", "onClose", "onAccept", "closeButtonText", "acceptButtonText", "closeButtonAttributes", "acceptButtonAttributes"];
 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 from 'react';
@@ -20,6 +20,7 @@ import Provider from '../../shared/Provider';
 import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
 export const defaultProps = {
   centered: false,
+  dropShadow: true,
   skeleton: false,
   icon: LightbulbIcon
 };
@@ -32,6 +33,7 @@ const InfoCard = localProps => {
   const {
       alt,
       centered,
+      dropShadow,
       title,
       skeleton,
       className,
@@ -52,7 +54,7 @@ const InfoCard = localProps => {
   const acceptButtonIsHidden = !onAccept && !acceptButtonText;
   validateDOMAttributes(allProps, props);
   return React.createElement("div", _extends({
-    className: classnames('dnb-info-card', spacingClasses, className, centered && 'dnb-info-card--centered')
+    className: classnames('dnb-info-card', spacingClasses, className, centered && 'dnb-info-card--centered', dropShadow && 'dnb-info-card--shadow')
   }, props), React.createElement(Provider, {
     skeleton: skeleton
   }, React.createElement(Space, {

package/es/components/info-card/InfoCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.js","names":["React","classnames","Button","IconPrimary","Img","Space","P","lightbulb_medium","LightbulbIcon","createSpacingClasses","Context","Provider","extendPropsWithContext","validateDOMAttributes","defaultProps","centered","skeleton","icon","InfoCard","localProps","_IconPrimary","context","useContext","allProps","alt","title","className","src","imgProps","text","onClose","onAccept","closeButtonText","acceptButtonText","closeButtonAttributes","acceptButtonAttributes","props","_objectWithoutProperties","_excluded","spacingClasses","closeButtonIsHidden","acceptButtonIsHidden","createElement","_extends","right","bottom","getIllustration","size","modifier","getButtons","top","type","variant","on_click","icon_position","imageProps","_objectSpread","_supportsSpacingProps"],"sources":["../../../../src/components/info-card/InfoCard.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Img, { ImgProps } from '../../elements/img/Img'\nimport Space from '../space/Space'\nimport P from '../../elements/P'\n\n// Icons\nimport { lightbulb_medium as LightbulbIcon } from '../../icons'\n\n// Shared\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport type { SpacingProps } from '../../shared/types'\nimport {\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport interface InfoCardProps {\n  /**\n   * Used in combination with `src` to provide an alt attribute for the `img` element.\n   * Default: null\n   */\n  alt?: React.ReactNode\n  /**\n   * Aligns the content to center, rather than left\n   * Default: false\n   */\n  centered?: boolean\n  /**\n   * Replace the default icon with custom icon.\n   * Default: Lightbulb (icon)\n   */\n  icon?: IconIcon\n  /**\n   * Props applied to the `img` element if the component is used to display an image. Replace the 'icon'\n   * Default: null\n   */\n  imgProps?: ImgProps\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n  /**\n   * Specifies the path to the image\n   * Default: null\n   */\n  src?: string\n  /**\n   * Image src, will replace the 'icon' with the image\n   * Default: null\n   */\n  text: React.ReactNode\n  /**\n   * Component title\n   * Default: null\n   */\n  title?: React.ReactNode\n  /**\n   * Is called when the close button is clicked\n   * Default: null\n   */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>\n  /**\n   * The text of the close button.\n   * Default: null\n   */\n  closeButtonText?: React.ReactNode\n  /**\n   * Is called when the accept button is clicked\n   * Default: null\n   */\n  onAccept?: React.MouseEventHandler<HTMLButtonElement>\n  /**\n   * The text of the accept button.\n   * Default: null\n   */\n  acceptButtonText?: React.ReactNode\n  /**\n   * Additional attributes for the close button.\n   * Default: null\n   */\n  closeButtonAttributes?: ButtonProps\n  /**\n   * Additional attributes for the accept button\n   * Default: null\n   */\n  acceptButtonAttributes?: ButtonProps\n}\n\nexport type InfoCardAllProps = InfoCardProps &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> &\n  SpacingProps\n\nexport const defaultProps = {\n  centered: false,\n  skeleton: false,\n  icon: LightbulbIcon,\n}\n\nconst InfoCard = (localProps: InfoCardAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  const allProps = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  // Extract additional props from global context\n  const {\n    alt,\n    centered,\n    title,\n    skeleton,\n    className,\n    icon,\n    src,\n    imgProps,\n    text,\n    onClose,\n    onAccept,\n    closeButtonText,\n    acceptButtonText,\n    closeButtonAttributes,\n    acceptButtonAttributes,\n    ...props\n  } = allProps\n\n  const spacingClasses = createSpacingClasses(props)\n\n  const closeButtonIsHidden = !onClose && !closeButtonText\n  const acceptButtonIsHidden = !onAccept && !acceptButtonText\n\n  validateDOMAttributes(allProps, props)\n\n  return (\n    <div\n      className={classnames(\n        'dnb-info-card',\n        centered && 'dnb-info-card--centered',\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Provider skeleton={skeleton}>\n        <Space\n          right={!centered ? 'small' : false}\n          bottom={centered ? 'small' : false}\n        >\n          {getIllustration()}\n        </Space>\n\n        <div className=\"dnb-info-card__content\">\n          {title && (\n            <P\n              className=\"dnb-info-card__title\"\n              size=\"small\"\n              modifier=\"medium\"\n              bottom=\"x-small\"\n            >\n              {title}\n            </P>\n          )}\n\n          <P size=\"small\" className=\"dnb-info-card__text\" bottom=\"0\">\n            {text}\n          </P>\n\n          {getButtons()}\n        </div>\n      </Provider>\n    </div>\n  )\n\n  function getButtons() {\n    if (closeButtonIsHidden && acceptButtonIsHidden) return null\n\n    return (\n      <div className=\"dnb-info-card__buttons\">\n        {!acceptButtonIsHidden && (\n          <Button\n            top={centered ? 'medium' : 'small'}\n            type=\"button\"\n            className=\"dnb-info-card__buttons__accept-button\"\n            variant=\"secondary\"\n            right={centered ? 'zero' : 'small'}\n            on_click={onAccept}\n            text={acceptButtonText}\n            {...acceptButtonAttributes}\n          />\n        )}\n        {!closeButtonIsHidden && (\n          <Button\n            type=\"button\"\n            className=\"dnb-info-card__buttons__close-button\"\n            variant=\"tertiary\"\n            top=\"small\"\n            on_click={onClose}\n            icon=\"close\"\n            icon_position=\"left\"\n            text={closeButtonText}\n            {...closeButtonAttributes}\n          />\n        )}\n      </div>\n    )\n  }\n\n  function getIllustration() {\n    if (src || imgProps) {\n      const imageProps = { src, alt, ...imgProps }\n      return <Img className=\"dnb-info-card__image\" {...imageProps} />\n    }\n    return (\n      <IconPrimary\n        size=\"medium\"\n        className=\"dnb-info-card__icon\"\n        icon={icon}\n      />\n    )\n  }\n}\n\nInfoCard._supportsSpacingProps = true\n\nexport default InfoCard\n"],"mappings":"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"}
+{"version":3,"file":"InfoCard.js","names":["React","classnames","Button","IconPrimary","Img","Space","P","lightbulb_medium","LightbulbIcon","createSpacingClasses","Context","Provider","extendPropsWithContext","validateDOMAttributes","defaultProps","centered","dropShadow","skeleton","icon","InfoCard","localProps","_IconPrimary","context","useContext","allProps","alt","title","className","src","imgProps","text","onClose","onAccept","closeButtonText","acceptButtonText","closeButtonAttributes","acceptButtonAttributes","props","_objectWithoutProperties","_excluded","spacingClasses","closeButtonIsHidden","acceptButtonIsHidden","createElement","_extends","right","bottom","getIllustration","size","modifier","getButtons","top","type","variant","on_click","icon_position","imageProps","_objectSpread","_supportsSpacingProps"],"sources":["../../../../src/components/info-card/InfoCard.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Img, { ImgProps } from '../../elements/img/Img'\nimport Space from '../space/Space'\nimport P from '../../elements/P'\n\n// Icons\nimport { lightbulb_medium as LightbulbIcon } from '../../icons'\n\n// Shared\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport type { SpacingProps } from '../../shared/types'\nimport {\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport interface InfoCardProps {\n  /**\n   * Used in combination with `src` to provide an alt attribute for the `img` element.\n   * Default: null\n   */\n  alt?: React.ReactNode\n  /**\n   * Aligns the content to center, rather than left\n   * Default: false\n   */\n  centered?: boolean\n  /**\n   * Determines whether to display a drop shadow around the card.\n   * Default: true\n   */\n  dropShadow?: boolean\n  /**\n   * Replace the default icon with custom icon.\n   * Default: Lightbulb (icon)\n   */\n  icon?: IconIcon\n  /**\n   * Props applied to the `img` element if the component is used to display an image. Replace the 'icon'\n   * Default: null\n   */\n  imgProps?: ImgProps\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n  /**\n   * Specifies the path to the image\n   * Default: null\n   */\n  src?: string\n  /**\n   * Image src, will replace the 'icon' with the image\n   * Default: null\n   */\n  text: React.ReactNode\n  /**\n   * Component title\n   * Default: null\n   */\n  title?: React.ReactNode\n  /**\n   * Is called when the close button is clicked\n   * Default: null\n   */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>\n  /**\n   * The text of the close button.\n   * Default: null\n   */\n  closeButtonText?: React.ReactNode\n  /**\n   * Is called when the accept button is clicked\n   * Default: null\n   */\n  onAccept?: React.MouseEventHandler<HTMLButtonElement>\n  /**\n   * The text of the accept button.\n   * Default: null\n   */\n  acceptButtonText?: React.ReactNode\n  /**\n   * Additional attributes for the close button.\n   * Default: null\n   */\n  closeButtonAttributes?: ButtonProps\n  /**\n   * Additional attributes for the accept button\n   * Default: null\n   */\n  acceptButtonAttributes?: ButtonProps\n}\n\nexport type InfoCardAllProps = InfoCardProps &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> &\n  SpacingProps\n\nexport const defaultProps = {\n  centered: false,\n  dropShadow: true,\n  skeleton: false,\n  icon: LightbulbIcon,\n}\n\nconst InfoCard = (localProps: InfoCardAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  const allProps = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  // Extract additional props from global context\n  const {\n    alt,\n    centered,\n    dropShadow,\n    title,\n    skeleton,\n    className,\n    icon,\n    src,\n    imgProps,\n    text,\n    onClose,\n    onAccept,\n    closeButtonText,\n    acceptButtonText,\n    closeButtonAttributes,\n    acceptButtonAttributes,\n    ...props\n  } = allProps\n\n  const spacingClasses = createSpacingClasses(props)\n\n  const closeButtonIsHidden = !onClose && !closeButtonText\n  const acceptButtonIsHidden = !onAccept && !acceptButtonText\n\n  validateDOMAttributes(allProps, props)\n\n  return (\n    <div\n      className={classnames(\n        'dnb-info-card',\n        centered && 'dnb-info-card--centered',\n        dropShadow && 'dnb-info-card--shadow',\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Provider skeleton={skeleton}>\n        <Space\n          right={!centered ? 'small' : false}\n          bottom={centered ? 'small' : false}\n        >\n          {getIllustration()}\n        </Space>\n\n        <div className=\"dnb-info-card__content\">\n          {title && (\n            <P\n              className=\"dnb-info-card__title\"\n              size=\"small\"\n              modifier=\"medium\"\n              bottom=\"x-small\"\n            >\n              {title}\n            </P>\n          )}\n\n          <P size=\"small\" className=\"dnb-info-card__text\" bottom=\"0\">\n            {text}\n          </P>\n\n          {getButtons()}\n        </div>\n      </Provider>\n    </div>\n  )\n\n  function getButtons() {\n    if (closeButtonIsHidden && acceptButtonIsHidden) return null\n\n    return (\n      <div className=\"dnb-info-card__buttons\">\n        {!acceptButtonIsHidden && (\n          <Button\n            top={centered ? 'medium' : 'small'}\n            type=\"button\"\n            className=\"dnb-info-card__buttons__accept-button\"\n            variant=\"secondary\"\n            right={centered ? 'zero' : 'small'}\n            on_click={onAccept}\n            text={acceptButtonText}\n            {...acceptButtonAttributes}\n          />\n        )}\n        {!closeButtonIsHidden && (\n          <Button\n            type=\"button\"\n            className=\"dnb-info-card__buttons__close-button\"\n            variant=\"tertiary\"\n            top=\"small\"\n            on_click={onClose}\n            icon=\"close\"\n            icon_position=\"left\"\n            text={closeButtonText}\n            {...closeButtonAttributes}\n          />\n        )}\n      </div>\n    )\n  }\n\n  function getIllustration() {\n    if (src || imgProps) {\n      const imageProps = { src, alt, ...imgProps }\n      return <Img className=\"dnb-info-card__image\" {...imageProps} />\n    }\n    return (\n      <IconPrimary\n        size=\"medium\"\n        className=\"dnb-info-card__icon\"\n        icon={icon}\n      />\n    )\n  }\n}\n\nInfoCard._supportsSpacingProps = true\n\nexport default InfoCard\n"],"mappings":"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"}

package/es/components/info-card/style/dnb-info-card.css

@@ -12,7 +12,6 @@
   padding: 1rem;
   overflow: hidden;
   background: var(--color-white);
-  box-shadow: var(--shadow-default);
 }
 .dnb-info-card::after {
   content: "";
@@ -29,6 +28,9 @@
   align-items: center;
   text-align: center;
 }
+.dnb-info-card--shadow {
+  box-shadow: var(--shadow-default);
+}
 .dnb-info-card__content {
   flex-direction: column;
   margin-top: 0.1875rem;

package/es/components/info-card/style/dnb-info-card.min.css

@@ -1 +1 @@
-.dnb-info-card{background:var(--color-white);box-shadow:var(--shadow-default);display:flex;flex-direction:row;overflow:hidden;padding:1rem;position:relative}.dnb-info-card:after{border:1px solid var(--color-black-8);content:"";inset:0;pointer-events:none;position:absolute}.dnb-info-card,.dnb-info-card:after{border-radius:.25rem}.dnb-info-card--centered{align-items:center;flex-direction:column;text-align:center}.dnb-info-card__content{flex-direction:column;margin-top:.1875rem;max-width:70ch}.dnb-info-card--centered .dnb-info-card__content{margin-top:0}.dnb-info-card__icon{color:var(--color-emerald-green)}.dnb-info-card__image{height:4rem;width:4rem}.dnb-info-card__buttons{display:flex;flex-flow:row wrap}.dnb-info-card--centered .dnb-info-card__buttons{align-items:center;flex-direction:column;text-align:center}
+.dnb-info-card{background:var(--color-white);display:flex;flex-direction:row;overflow:hidden;padding:1rem;position:relative}.dnb-info-card:after{border:1px solid var(--color-black-8);content:"";inset:0;pointer-events:none;position:absolute}.dnb-info-card,.dnb-info-card:after{border-radius:.25rem}.dnb-info-card--centered{align-items:center;flex-direction:column;text-align:center}.dnb-info-card--shadow{box-shadow:var(--shadow-default)}.dnb-info-card__content{flex-direction:column;margin-top:.1875rem;max-width:70ch}.dnb-info-card--centered .dnb-info-card__content{margin-top:0}.dnb-info-card__icon{color:var(--color-emerald-green)}.dnb-info-card__image{height:4rem;width:4rem}.dnb-info-card__buttons{display:flex;flex-flow:row wrap}.dnb-info-card--centered .dnb-info-card__buttons{align-items:center;flex-direction:column;text-align:center}

package/es/components/info-card/style/dnb-info-card.scss

@@ -29,14 +29,16 @@
     border-radius: 0.25rem;
   }
 
-  @include defaultDropShadow();
-
   &--centered {
     flex-direction: column;
     align-items: center;
     text-align: center;
   }
 
+  &--shadow {
+    @include defaultDropShadow();
+  }
+
   &__content {
     flex-direction: column;
     margin-top: 0.1875rem;

package/es/components/input/Input.d.ts

@@ -37,7 +37,7 @@ export interface InputProps
    */
   type?: string;
   /**
-   * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if you define a number like `size="2"` then it will be forwarded as the input element attribute.
+   * The sizes you can choose is `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if you define a number like `size={2}` then it will be forwarded as the input element attribute.
    */
   size?: InputSize;
   /**
@@ -62,7 +62,7 @@ export interface InputProps
    */
   status?: FormStatusText;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   /**
@@ -79,7 +79,7 @@ export interface InputProps
    */
   input_state?: string;
   /**
-   * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.
+   * Defaults to `off`. Set to `on` or any of [allowed `attributes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete). Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.
    */
   autocomplete?: string;
   /**
@@ -88,7 +88,7 @@ export interface InputProps
   submit_button_title?: string;
   clear_button_title?: string;
   /**
-   * The placeholder which shows up once the input value is empty
+   * The placeholder which shows up once the input value is empty.
    */
   placeholder?: string;
   /**
@@ -126,11 +126,11 @@ export interface InputProps
    */
   input_class?: string;
   /**
-   * Provide the Input element with any attributes by using an Object `input_attributes={{size:&#39;2&#39;}}` or a JSON Object `input_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.
+   * Provide the Input element with any attributes by using an Object `input_attributes={{size:'2'}}` or a JSON Object `input_attributes='{"size":"2"}'`. **NB:** Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.
    */
   input_attributes?: InputInputAttributes;
   /**
-   * <em>(internal)</em> by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.
+   * By providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.
    */
   input_element?: InputInputElement;
   /**
@@ -151,7 +151,7 @@ export interface InputProps
   inner_ref?: React.Ref;
   readOnly?: boolean;
   /**
-   * <em>(internal)</em> by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component.
+   * By providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component.
    */
   inner_element?: React.ReactNode;
   /**
@@ -196,7 +196,7 @@ export default class Input extends React.Component<InputProps, any> {
   render(): JSX.Element;
 }
 export interface SubmitButtonProps
-  extends React.HTMLProps<HTMLInputElement> {
+  extends React.HTMLProps<HTMLButtonElement> {
   id?: string;
   /**
    * The content value of the input.
@@ -222,7 +222,7 @@ export interface SubmitButtonProps
    */
   status?: FormStatusText;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   /**

package/es/components/input/InputDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const inputProperties: PropertiesTableProps;

package/es/components/input/InputDocs.js

@@ -0,0 +1,158 @@
+export const inputProperties = {
+  value: {
+    doc: 'The content value of the input.',
+    type: 'string',
+    status: 'optional'
+  },
+  align: {
+    doc: 'Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`.',
+    type: 'string',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  placeholder: {
+    doc: 'The placeholder which shows up once the input value is empty.',
+    type: 'string',
+    status: 'optional'
+  },
+  icon: {
+    doc: 'Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.',
+    type: ['string', 'React.Component'],
+    status: 'optional'
+  },
+  icon_position: {
+    doc: 'Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.',
+    type: 'string',
+    status: 'optional'
+  },
+  icon_size: {
+    doc: 'The icon size of the icon shows. Defaults to `medium`.',
+    type: 'string',
+    status: 'optional'
+  },
+  keep_placeholder: {
+    doc: 'Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  input_class: {
+    doc: 'In case we have to set a custom input class.',
+    type: 'string',
+    status: 'optional'
+  },
+  type: {
+    doc: 'Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.',
+    type: 'string',
+    status: 'optional'
+  },
+  autocomplete: {
+    doc: 'Defaults to `off`. Set to `on` or any of [allowed `attributes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete). Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.',
+    type: 'string',
+    status: 'optional'
+  },
+  submit_button_title: {
+    doc: 'Title attribute for the search icon. Only relevant if search input.',
+    type: 'string',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.',
+    type: ['string', 'React.Component'],
+    status: 'optional'
+  },
+  size: {
+    doc: 'The sizes you can choose is `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if you define a number like `size={2}` then it will be forwarded as the input element attribute.',
+    type: ['string', 'number'],
+    status: 'optional'
+  },
+  selectall: {
+    doc: 'If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  clear: {
+    doc: 'If set to `true`, then a clear button will be shown which lets the user clear any given input value.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'If set to `true`, then the input field will be 100% in `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  input_attributes: {
+    doc: 'Provide the Input element with any attributes by using an Object `input_attributes={{size:\'2\'}}` or a JSON Object `input_attributes=\'{"size":"2"}\'`. **NB:** Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.',
+    type: 'object',
+    status: 'optional'
+  },
+  input_state: {
+    doc: 'Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`.',
+    type: 'string',
+    status: 'optional'
+  },
+  submit_element: {
+    doc: 'Accepts a React element which will show up like the "submit button" would do on `type="search"`.',
+    type: ['string', 'React.Element'],
+    status: 'optional'
+  },
+  inner_ref: {
+    doc: 'By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  input_element: {
+    doc: 'By providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`.',
+    type: ['string', 'React.Element'],
+    status: 'internal'
+  },
+  inner_element: {
+    doc: 'By providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component.',
+    type: ['string', 'React.Element'],
+    status: 'internal'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=InputDocs.js.map

package/es/components/input/InputDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputDocs.js","names":["inputProperties","value","doc","type","status","align","label","label_sr_only","label_direction","status_state","status_props","globalStatus","placeholder","icon","icon_position","icon_size","keep_placeholder","input_class","autocomplete","submit_button_title","suffix","size","selectall","clear","stretch","skeleton","input_attributes","input_state","submit_element","inner_ref","input_element","inner_element"],"sources":["../../../../src/components/input/InputDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const inputProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The content value of the input.',\n    type: 'string',\n    status: 'optional',\n  },\n  align: {\n    doc: 'Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'The placeholder which shows up once the input value is empty.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon: {\n    doc: 'Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.',\n    type: ['string', 'React.Component'],\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'The icon size of the icon shows. Defaults to `medium`.',\n    type: 'string',\n    status: 'optional',\n  },\n  keep_placeholder: {\n    doc: 'Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  input_class: {\n    doc: 'In case we have to set a custom input class.',\n    type: 'string',\n    status: 'optional',\n  },\n  type: {\n    doc: 'Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.',\n    type: 'string',\n    status: 'optional',\n  },\n  autocomplete: {\n    doc: 'Defaults to `off`. Set to `on` or any of [allowed `attributes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete). Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_button_title: {\n    doc: 'Title attribute for the search icon. Only relevant if search input.',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.',\n    type: ['string', 'React.Component'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'The sizes you can choose is `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if you define a number like `size={2}` then it will be forwarded as the input element attribute.',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  selectall: {\n    doc: 'If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  clear: {\n    doc: 'If set to `true`, then a clear button will be shown which lets the user clear any given input value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the input field will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  input_attributes: {\n    doc: 'Provide the Input element with any attributes by using an Object `input_attributes={{size:\\'2\\'}}` or a JSON Object `input_attributes=\\'{\"size\":\"2\"}\\'`. **NB:** Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute.',\n    type: 'object',\n    status: 'optional',\n  },\n  input_state: {\n    doc: 'Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_element: {\n    doc: 'Accepts a React element which will show up like the \"submit button\" would do on `type=\"search\"`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  inner_ref: {\n    doc: 'By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  input_element: {\n    doc: 'By providing a new component we can change the internally used element. Also supports a string only, like `input_element=\"input\"`.',\n    type: ['string', 'React.Element'],\n    status: 'internal',\n  },\n  inner_element: {\n    doc: 'By providing a new component to be rendered inside the \"shell\" – we can add a freely customizable internal element. Used by the Autocomplete component.',\n    type: ['string', 'React.Element'],\n    status: 'internal',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

package/es/components/input/InputPassword.d.ts

@@ -1,17 +1,6 @@
-import * as React from 'react';
-import type { InputProps } from './Input';
-export interface InputPasswordProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
-    InputProps {
-  show_password?: string;
-  hide_password?: string;
-  on_show_password?: (...args: any[]) => any;
-  on_hide_password?: (...args: any[]) => any;
-}
-export default class InputPassword extends React.Component<
-  InputPasswordProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+export default InputPassword;
+/**
+ * @deprecated in v11, use `Field.Password instead.`
+ */
+declare const InputPassword: typeof Password;
+import Password from '../../extensions/forms/Field/Password';