@builder.io/sdk-svelte 1.0.27 → 1.0.29

package/lib/browser/blocks/accordion/accordion.svelte

@@ -0,0 +1,160 @@
+<script>import Blocks from "../../components/blocks/index";
+import "../../functions/camel-to-kebab-case";
+import { convertOrderNumberToString } from "./helpers";
+export let grid = undefined;
+export let oneAtATime = undefined;
+export let items;
+export let gridRowWidth = undefined;
+export let builderBlock;
+export let builderContext;
+export let builderComponents;
+export let builderLinkComponent = undefined;
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
+}
+function getAccordionTitleClassName(index) {
+    return `builder-accordion-title builder-accordion-title-${open.includes(index) ? "open" : "closed"}`;
+}
+function getAccordionDetailClassName(index) {
+    return `builder-accordion-detail builder-accordion-detail-${open.includes(index) ? "open" : "closed"}`;
+}
+function onClick(index) {
+    if (open.includes(index)) {
+        open = onlyOneAtATime() ? [] : open.filter((item) => item !== index);
+    }
+    else {
+        open = onlyOneAtATime() ? [index] : open.concat(index);
+    }
+}
+$: onlyOneAtATime = () => {
+    return Boolean(grid || oneAtATime);
+};
+$: accordionStyles = () => {
+    const styles = {
+        display: "flex",
+        alignItems: "stretch",
+        flexDirection: "column",
+        ...(grid && {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            flexWrap: "wrap",
+        }),
+    };
+    return styles;
+};
+$: accordionTitleStyles = () => {
+    const shared = {
+        display: "flex",
+        flexDirection: "column",
+    };
+    const styles = {
+        ...shared,
+        alignItems: "stretch",
+        cursor: "pointer",
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== undefined));
+};
+$: openGridItemOrder = () => {
+    let itemOrder = null;
+    const getOpenGridItemPosition = grid && open.length;
+    if (getOpenGridItemPosition && document) {
+        const openItemIndex = open[0];
+        const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
+        let subjectItem = openItem;
+        itemOrder = openItemIndex;
+        if (subjectItem) {
+            let prevItemRect = subjectItem.getBoundingClientRect();
+            while ((subjectItem = subjectItem && subjectItem.nextElementSibling)) {
+                if (subjectItem) {
+                    if (subjectItem.classList.contains("builder-accordion-detail")) {
+                        continue;
+                    }
+                    const subjectItemRect = subjectItem.getBoundingClientRect();
+                    if (subjectItemRect.left > prevItemRect.left) {
+                        const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
+                        if (!isNaN(index)) {
+                            prevItemRect = subjectItemRect;
+                            itemOrder = index;
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    if (typeof itemOrder === "number") {
+        itemOrder = itemOrder + 1;
+    }
+    return itemOrder;
+};
+$: accordionDetailStyles = () => {
+    const styles = {
+        ...{
+            order: typeof openGridItemOrder() === "number"
+                ? openGridItemOrder()
+                : undefined,
+        },
+        ...(grid && {
+            width: "100%",
+        }),
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== undefined));
+};
+let open = [];
+</script>
+
+<div style={stringifyStyles(accordionStyles())} class="builder-accordion">
+  {#each items as item, index}
+    <div
+      style={stringifyStyles({
+        ...accordionTitleStyles(),
+        width: grid ? gridRowWidth : undefined,
+        ...{
+          order:
+            openGridItemOrder() !== null
+              ? convertOrderNumberToString(index)
+              : convertOrderNumberToString(index + 1),
+        },
+      })}
+      class={getAccordionTitleClassName(index)}
+      data-index={index}
+      on:click={(event) => {
+        onClick(index);
+      }}
+    >
+      <Blocks
+        blocks={item.title}
+        path={`items.${index}.title`}
+        parent={builderBlock.id}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
+      />
+    </div>
+
+    {#if open.includes(index)}
+      <div
+        style={stringifyStyles(accordionDetailStyles())}
+        class={getAccordionDetailClassName(index)}
+      >
+        <Blocks
+          blocks={item.detail}
+          path={`items.${index}.detail`}
+          parent={builderBlock.id}
+          context={builderContext}
+          registeredComponents={builderComponents}
+          linkComponent={builderLinkComponent}
+        />
+      </div>
+    {/if}
+  {/each}
+</div>

package/lib/browser/blocks/accordion/accordion.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { AccordionProps } from "./accordion.types";
+declare const __propDef: {
+    props: {
+        grid?: AccordionProps["grid"];
+        oneAtATime?: AccordionProps["oneAtATime"];
+        items: AccordionProps["items"];
+        gridRowWidth?: AccordionProps["gridRowWidth"];
+        builderBlock: AccordionProps["builderBlock"];
+        builderContext: AccordionProps["builderContext"];
+        builderComponents: AccordionProps["builderComponents"];
+        builderLinkComponent?: AccordionProps["builderLinkComponent"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type AccordionProps_ = typeof __propDef.props;
+export { AccordionProps_ as AccordionProps };
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}

package/lib/browser/blocks/accordion/accordion.types.d.ts

@@ -0,0 +1,12 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export interface AccordionProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+    items: {
+        title: BuilderBlock[];
+        detail: BuilderBlock[];
+    }[];
+    oneAtATime?: boolean;
+    grid?: boolean;
+    gridRowWidth?: string;
+    useChildrenForItems?: boolean;
+}

package/lib/browser/blocks/accordion/accordion.types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/blocks/accordion/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/accordion/component-info.js

@@ -0,0 +1,123 @@
+const defaultTitle = {
+    '@type': '@builder.io/sdk:Element',
+    layerName: 'Accordion item title',
+    responsiveStyles: {
+        large: {
+            marginTop: '10px',
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'stretch',
+            flexDirection: 'column',
+            paddingBottom: '10px'
+        }
+    },
+    children: [{
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column'
+                }
+            },
+            component: {
+                name: 'Text',
+                options: {
+                    text: 'I am an accordion title. Click me!'
+                }
+            }
+        }]
+};
+const defaultDetail = {
+    '@type': '@builder.io/sdk:Element',
+    layerName: 'Accordion item detail',
+    responsiveStyles: {
+        large: {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'stretch',
+            flexDirection: 'column',
+            marginTop: '10px',
+            paddingBottom: '10px'
+        }
+    },
+    children: [{
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    paddingTop: '50px',
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingBottom: '50px'
+                }
+            },
+            component: {
+                name: 'Text',
+                options: {
+                    text: 'I am an accordion detail, hello!'
+                }
+            }
+        }]
+};
+export const componentInfo = {
+    name: 'Builder:Accordion',
+    canHaveChildren: true,
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35',
+    defaultStyles: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'stretch'
+    },
+    inputs: [{
+            name: 'items',
+            type: 'list',
+            broadcast: true,
+            subFields: [{
+                    name: 'title',
+                    type: 'uiBlocks',
+                    hideFromUI: true,
+                    defaultValue: [defaultTitle]
+                }, {
+                    name: 'detail',
+                    type: 'uiBlocks',
+                    hideFromUI: true,
+                    defaultValue: [defaultDetail]
+                }],
+            defaultValue: [{
+                    title: [defaultTitle],
+                    detail: [defaultDetail]
+                }, {
+                    title: [defaultTitle],
+                    detail: [defaultDetail]
+                }],
+            showIf: (options) => !options.get('useChildrenForItems')
+        }, {
+            name: 'oneAtATime',
+            helperText: 'Only allow opening one at a time (collapse all others when new item openned)',
+            type: 'boolean',
+            defaultValue: false
+        }, {
+            name: 'grid',
+            helperText: 'Display as a grid',
+            type: 'boolean',
+            defaultValue: false
+        }, {
+            name: 'gridRowWidth',
+            helperText: 'Display as a grid',
+            type: 'string',
+            showIf: (options) => options.get('grid'),
+            defaultValue: '25%'
+        }, {
+            name: 'useChildrenForItems',
+            type: 'boolean',
+            helperText: 'Use child elements for each slide, instead of the array. Useful for dynamically repeating items',
+            advanced: true,
+            defaultValue: false,
+            onChange: (options) => {
+                if (options.get('useChildrenForItems') === true) {
+                    options.set('items', []);
+                }
+            }
+        }]
+};

package/lib/browser/blocks/accordion/helpers.d.ts

@@ -0,0 +1 @@
+export declare const convertOrderNumberToString: (order: number) => string;

package/lib/browser/blocks/accordion/helpers.js

@@ -0,0 +1,3 @@
+export const convertOrderNumberToString = (order) => {
+    return order.toString();
+};

package/lib/browser/blocks/accordion/index.d.ts

@@ -0,0 +1 @@
+export { default } from './accordion.svelte';

package/lib/browser/blocks/accordion/index.js

@@ -0,0 +1 @@
+export { default } from './accordion.svelte';

package/lib/browser/blocks/columns/columns.svelte

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
 <script>import Blocks from "../../components/blocks/blocks.svelte";
+import "../../components/dynamic-div.svelte";
 import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
 import InlinedStyles from "../../components/inlined-styles.svelte";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
@@ -9,7 +10,6 @@ import "../../functions/deopt";
 import { getClassPropName } from "../../functions/get-class-prop-name";
 import { mapStyleObjToStrIfNeeded } from "../../functions/get-style";
 import { getColumnsClass } from "./helpers";
-import "../../components/dynamic-div.svelte";
 export let space = undefined;
 export let columns = undefined;
 export let stackColumnsAt = undefined;

package/lib/browser/blocks/form/form/form.svelte

@@ -58,12 +58,12 @@ function onSubmit(event) {
             return;
         }
         event.preventDefault();
-        const el = event.currentTarget;
+        const el = event.currentTarget || event.target;
         const headers = customHeaders || {};
         let body;
         const formData = new FormData(el);
         // TODO: maybe support null
-        const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea"))
+        const formPairs = Array.from(el.querySelectorAll("input,select,textarea"))
             .filter((el) => !!el.name)
             .map((el) => {
             let value;
@@ -247,6 +247,7 @@ let formErrorMessage = "";
   on:submit={(event) => {
     onSubmit(event);
   }}
+  {...{}}
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >

package/lib/browser/blocks/symbol/symbol.svelte

@@ -1,10 +1,10 @@
 <script>import { onMount } from "svelte";
 import ContentVariants from "../../components/content-variants/index";
 import { filterAttrs } from "../helpers";
+import "../../components/dynamic-div.svelte";
 import { getClassPropName } from "../../functions/get-class-prop-name";
 import { setAttrs } from "../helpers";
 import { fetchSymbolContent } from "./symbol.helpers";
-import "../../components/dynamic-div.svelte";
 export let symbol = undefined;
 export let attributes = undefined;
 export let dynamic = undefined;

package/lib/browser/blocks/tabs/tabs.svelte

@@ -1,9 +1,9 @@
 <script>import Blocks from "../../components/blocks/blocks.svelte";
 export let defaultActiveTab = undefined;
 export let tabs;
-export let activeTabStyle = undefined;
-export let tabHeaderLayout = undefined;
 export let collapsible = undefined;
+export let tabHeaderLayout = undefined;
+export let activeTabStyle = undefined;
 export let builderBlock;
 export let builderContext;
 export let builderComponents;
@@ -21,8 +21,13 @@ function stringifyStyles(stylesObj) {
 function activeTabContent(active) {
     return tabs && tabs[active].content;
 }
-function getActiveTabStyle(index) {
-    return activeTab === index ? activeTabStyle : {};
+function onClick(index) {
+    if (index === activeTab && collapsible) {
+        activeTab = -1;
+    }
+    else {
+        activeTab = index;
+    }
 }
 let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
 </script>
@@ -39,16 +44,14 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
   >
     {#each tabs as tab, index (index)}
       <span
-        style={stringifyStyles(getActiveTabStyle(index))}
+        style={stringifyStyles({
+          ...(activeTab === index ? activeTabStyle : {}),
+        })}
         class={`builder-tab-wrap ${
           activeTab === index ? "builder-tab-active" : ""
         }`}
         on:click={(event) => {
-          if (index === activeTab && collapsible) {
-            activeTab = -1;
-          } else {
-            activeTab = index;
-          }
+          onClick(index);
         }}
         ><Blocks
           parent={builderBlock.id}

package/lib/browser/blocks/tabs/tabs.svelte.d.ts

@@ -4,9 +4,9 @@ declare const __propDef: {
     props: {
         defaultActiveTab?: TabsProps["defaultActiveTab"];
         tabs: TabsProps["tabs"];
-        activeTabStyle?: TabsProps["activeTabStyle"];
-        tabHeaderLayout?: TabsProps["tabHeaderLayout"];
         collapsible?: TabsProps["collapsible"];
+        tabHeaderLayout?: TabsProps["tabHeaderLayout"];
+        activeTabStyle?: TabsProps["activeTabStyle"];
         builderBlock: TabsProps["builderBlock"];
         builderContext: TabsProps["builderContext"];
         builderComponents: TabsProps["builderComponents"];

package/lib/browser/components/block/animator.d.ts

@@ -1,5 +1,4 @@
 import type { BuilderAnimation } from '../../types/builder-block';
-export declare const camelCaseToKebabCase: (str?: string) => string;
 export declare function bindAnimations(animations: BuilderAnimation[]): void;
 export declare function triggerAnimation(animation: BuilderAnimation): void;
 export declare function bindScrollInViewAnimation(animation: BuilderAnimation): void;

package/lib/browser/components/block/animator.js

@@ -1,3 +1,4 @@
+import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
 // eslint-disable-next-line @typescript-eslint/ban-types
 function throttle(func, wait, options = {}) {
     let context;
@@ -54,7 +55,6 @@ function assign(target, ..._args) {
     }
     return to;
 }
-export const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
 export function bindAnimations(animations) {
     for (const animation of animations) {
         switch (animation.trigger) {
@@ -120,7 +120,7 @@ export function triggerAnimation(animation) {
         // TODO: only include properties explicitly set in the animation
         // using Object.keys(styles)
         setTimeout(() => {
-            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
             if (animation.delay) {
                 element.style.transitionDelay = animation.delay + 's';
             }
@@ -193,7 +193,7 @@ export function bindScrollInViewAnimation(animation) {
         attachDefaultState();
         // TODO: queue/batch these timeouts!
         setTimeout(() => {
-            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
             if (animation.delay) {
                 element.style.transitionDelay = animation.delay + 's';
             }

package/lib/browser/components/block/block.helpers.js

@@ -74,8 +74,8 @@ export const getInheritedStyles = ({ block, context }) => {
     return extractTextStyles(style);
 };
 export const shouldPassLinkComponent = (block) => {
-    return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+    return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
 };
 export const shouldPassRegisteredComponents = (block) => {
-    return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+    return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
 };

package/lib/browser/components/block/block.svelte

@@ -3,13 +3,13 @@
 <script>import { onMount } from "svelte";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options";
 import { getProcessedBlock } from "../../functions/get-processed-block";
+import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
 import { getComponent, getRepeatItemData, shouldPassLinkComponent, shouldPassRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
 import RepeatedBlock from "./components/repeated-block.svelte";
-import "../dynamic-div.svelte";
 export let block;
 export let context;
 export let registeredComponents;

package/lib/browser/components/block/components/block-styles.svelte

@@ -2,11 +2,11 @@
 
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes";
 import { TARGET } from "../../../constants/target";
+import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
 import { getProcessedBlock } from "../../../functions/get-processed-block";
 import { createCssClass } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
-import { camelCaseToKebabCase } from "../animator";
 export let block;
 export let context;
 $: canShowBlock = () => {
@@ -76,7 +76,7 @@ $: css = () => {
                 className: `${className}:hover`,
                 styles: {
                     ...hoverStyles,
-                    transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(hoverAnimation.easing)}`,
+                    transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(hoverAnimation.easing)}`,
                     transitionDelay: hoverAnimation.delay
                         ? `${hoverAnimation.delay}s`
                         : "0s",

package/lib/browser/components/content/components/enable-editor.svelte

@@ -18,8 +18,8 @@ import "../../../helpers/preview-lru-cache/set";
 import { createEditorListener } from "../../../helpers/subscribe-to-editor";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing";
 import { triggerAnimation } from "../../block/animator";
-import { getWrapperClassName } from "./styles.helpers";
 import "../../dynamic-div.svelte";
+import { getWrapperClassName } from "./styles.helpers";
 export let builderContextSignal;
 export let canTrack = undefined;
 export let apiKey;
@@ -201,7 +201,7 @@ function elementRef_onIniteditingbldr(event) {
 function elementRef_onInitpreviewingbldr(event) {
     const searchParams = new URL(location.href).searchParams;
     const searchParamPreviewModel = searchParams.get("builder.preview");
-    const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
+    const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
     const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
     /**
      * Make sure that:
@@ -272,7 +272,7 @@ onMount(() => {
 });
 onMount(() => {
     if (!apiKey) {
-        logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+        logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
     }
     evaluateJsCode();
     runHttpRequests();

package/lib/browser/components/content/content.svelte

@@ -6,12 +6,12 @@ import ComponentsContext from "../../context/components.context";
 import { serializeComponentInfo } from "../../functions/register-component";
 import Blocks from "../blocks/blocks.svelte";
 import { getUpdateVariantVisibilityScript } from "../content-variants/helpers";
+import "../dynamic-div.svelte";
 import InlinedScript from "../inlined-script.svelte";
 import EnableEditor from "./components/enable-editor.svelte";
 import ContentStyles from "./components/styles.svelte";
 import { getContentInitialValue, getRootStateInitialValue, } from "./content.helpers";
 import "./wrap-component-ref";
-import "../dynamic-div.svelte";
 export let content = undefined;
 export let customComponents = undefined;
 export let data = undefined;

package/lib/browser/components/content-variants/content-variants.types.d.ts

@@ -22,7 +22,7 @@ export interface ContentVariantsPrps {
      */
     context?: BuilderRenderContext;
     /**
-     * Your API Key: needed to dynamically fetch symbols (required).
+     * Your API Key: needed to enable visual editing, and to dynamically fetch symbols (required).
      */
     apiKey: string;
     apiVersion?: ApiVersion;

package/lib/browser/constants/builder-registered-components.js

@@ -1,3 +1,5 @@
+import { componentInfo as accordionComponentInfo } from '../blocks/accordion/component-info';
+import { default as Accordion } from '../blocks/accordion/index';
 import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info';
 import { default as Button } from '../blocks/button/index';
 import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info';
@@ -49,4 +51,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, ...(TARGET === 'rsc' ? [] : [{
             component: Tabs,
             ...tabsComponentInfo
+        }, {
+            component: Accordion,
+            ...accordionComponentInfo
         }]), ...getExtraComponents()];

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.27";
+export declare const SDK_VERSION = "1.0.29";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.27";
+export const SDK_VERSION = "1.0.29";

package/lib/browser/functions/camel-to-kebab-case.d.ts

@@ -1 +1 @@
-export declare const camelToKebabCase: (string: string) => string;
+export declare const camelToKebabCase: (str?: string) => string;

package/lib/browser/functions/camel-to-kebab-case.js

@@ -1 +1 @@
-export const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+export const camelToKebabCase = (str) => str ? str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() : '';