@ark-ui/solid - npm Package Compare versions

Comparing version 0.0.0-rc-20221125023333 to 0.0.0-rc-20221126123806

dist/index.cjs.js

@@ -31,2 +31,3 @@ "use strict";
   AccordionButton: () => AccordionButton,
+  AccordionIcon: () => AccordionIcon,
   AccordionItem: () => AccordionItem,
@@ -37,2 +38,3 @@ AccordionPanel: () => AccordionPanel,
   useAccordion: () => useAccordion,
+  useAccordionItemContext: () => useAccordionItemContext,
   usePinInput: () => usePinInput
@@ -86,9 +88,12 @@ });
 var useAccordion = (props) => {
-  const [state, send] = (0, import_solid2.useMachine)(
-    accordion.machine({
-      id: (0, import_solid_js2.createUniqueId)(),
-      ...props,
-      value: props.defaultValue ?? props.value
-    })
-  );
+  const initialContext = {
+    id: (0, import_solid_js2.createUniqueId)(),
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value
+  };
+  const [state, send] = (0, import_solid2.useMachine)(accordion.machine(initialContext), { context });
   return (0, import_solid_js2.createMemo)(() => accordion.connect(state, send, import_solid2.normalizeProps));
@@ -98,4 +103,4 @@ };
 // src/accordion/accordion.tsx
-function Accordion(props) {
-  const [accordionProps, htmlProps] = (0, import_solid_js3.splitProps)(props, [
+var Accordion = (props) => {
+  const [accordionProps, divProps] = (0, import_solid_js3.splitProps)(props, [
     "collapsible",
@@ -105,2 +110,4 @@ "defaultValue",
     "disabled",
+    "getRootNode",
+    "id",
     "ids",
@@ -112,5 +119,9 @@ "multiple",
   const accordion2 = useAccordion(accordionProps);
-  return <AccordionProvider value={accordion2}><ark.div {...accordion2?.().rootProps} {...htmlProps} /></AccordionProvider>;
-}
+  const mergedProps = (0, import_solid_js3.mergeProps)(accordion2().rootProps, divProps);
+  return <AccordionProvider value={accordion2}><ark.div {...mergedProps} /></AccordionProvider>;
+};
 
+// src/accordion/accordion-button.tsx
+var import_solid_js4 = require("solid-js");
+
 // src/accordion/accordion-item-context.ts
@@ -125,31 +136,32 @@ var [AccordionItemProvider, useAccordionItemContext] = createContext(
 // src/accordion/accordion-button.tsx
-function AccordionButton(props) {
+var AccordionButton = (props) => {
   const api = useAccordionContext();
-  const { value, disabled } = useAccordionItemContext();
-  return <ark.button {...api?.().getTriggerProps?.({
-    value,
-    disabled
-  })} {...props} />;
-}
+  const itemContext = useAccordionItemContext();
+  const mergedProps = (0, import_solid_js4.mergeProps)(api().getTriggerProps(itemContext), props);
+  return <ark.button {...mergedProps} />;
+};
 
+// src/accordion/accordion-icon.tsx
+var AccordionIcon = (props) => <ark.div {...props} />;
+
 // src/accordion/accordion-item.tsx
-var import_solid_js4 = require("solid-js");
-function AccordionItem(props) {
-  const [itemProps, htmlProps] = (0, import_solid_js4.splitProps)(props, ["value", "disabled"]);
+var import_solid_js5 = require("solid-js");
+var AccordionItem = (props) => {
+  const [itemProps, htmlProps] = (0, import_solid_js5.splitProps)(props, ["value", "disabled"]);
   const api = useAccordionContext();
-  return <AccordionItemProvider value={itemProps}><ark.div {...api?.().getItemProps({ value: itemProps.value })} {...htmlProps} /></AccordionItemProvider>;
-}
+  const mergedProps = (0, import_solid_js5.mergeProps)(api().getItemProps(itemProps), htmlProps);
+  return <AccordionItemProvider value={itemProps}><ark.div {...mergedProps} /></AccordionItemProvider>;
+};
 
 // src/accordion/accordion-panel.tsx
-function AccordionPanel(props) {
+var import_solid_js6 = require("solid-js");
+var AccordionPanel = (props) => {
   const api = useAccordionContext();
-  const { value, disabled } = useAccordionItemContext();
-  return <ark.div {...api?.().getContentProps({
-    value,
-    disabled
-  })} {...props} />;
-}
+  const itemContext = useAccordionItemContext();
+  const mergedProps = (0, import_solid_js6.mergeProps)(api().getContentProps(itemContext), props);
+  return <ark.div {...mergedProps} />;
+};
 
 // src/pin-input/pin-input.tsx
-var import_solid_js6 = require("solid-js");
+var import_solid_js8 = require("solid-js");
 
@@ -165,7 +177,7 @@ // src/pin-input/pin-input-context.ts
 var import_solid3 = require("@zag-js/solid");
-var import_solid_js5 = require("solid-js");
+var import_solid_js7 = require("solid-js");
 var usePinInput = (props) => {
   const [state, send] = (0, import_solid3.useMachine)(
     pinInput.machine({
-      id: (0, import_solid_js5.createUniqueId)(),
+      id: (0, import_solid_js7.createUniqueId)(),
       ...props,
@@ -175,3 +187,3 @@ value: props.defaultValue ?? props.value ?? []
   );
-  return (0, import_solid_js5.createMemo)(() => pinInput.connect(state, send, import_solid3.normalizeProps));
+  return (0, import_solid_js7.createMemo)(() => pinInput.connect(state, send, import_solid3.normalizeProps));
 };
@@ -181,3 +193,3 @@
 var PinInput = (props) => {
-  const [pinInputProps, htmlProps] = (0, import_solid_js6.splitProps)(props, [
+  const [pinInputProps, htmlProps] = (0, import_solid_js8.splitProps)(props, [
     "autoFocus",
@@ -219,2 +231,3 @@ "blurOnComplete",
   AccordionButton,
+  AccordionIcon,
   AccordionItem,
@@ -225,3 +238,4 @@ AccordionPanel,
   useAccordion,
+  useAccordionItemContext,
   usePinInput
 });

dist/index.d.ts

@@ -9,3 +9,8 @@ import * as solid_js from 'solid-js';
 
-type UseAccordionProps = Omit<accordion.Context, 'id'> & {
+/**
+ * Type to make properties optional and preserve their type
+ */
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+type UseAccordionProps = Optional<accordion.Context, 'id'> & {
     defaultValue?: accordion.Context['value'];
@@ -41,15 +46,25 @@ };
 type AccordionProps = Assign<HTMLArkProps<'div'>, UseAccordionProps>;
-declare function Accordion(props: AccordionProps): solid_js.JSX.Element;
+declare const Accordion: (props: AccordionProps) => solid_js.JSX.Element;
 
 type AccordionButtonProps = HTMLArkProps<'button'>;
-declare function AccordionButton(props: AccordionButtonProps): solid_js.JSX.Element;
+declare const AccordionButton: (props: AccordionButtonProps) => solid_js.JSX.Element;
 
+type AccordionIconProps = HTMLArkProps<'div'>;
+declare const AccordionIcon: (props: AccordionIconProps) => solid_js.JSX.Element;
+
 type AccordionItemProps = Assign<HTMLArkProps<'div'>, {
     value: string;
     disabled?: boolean;
+    children?: JSX.Element;
 }>;
-declare function AccordionItem(props: AccordionItemProps): solid_js.JSX.Element;
+declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
 
+type AccordionItemContext = {
+    value: string;
+    disabled?: boolean;
+};
+declare const useAccordionItemContext: () => AccordionItemContext;
+
 type AccordionPanelProps = HTMLArkProps<'div'>;
-declare function AccordionPanel(props: AccordionPanelProps): solid_js.JSX.Element;
+declare const AccordionPanel: (props: AccordionPanelProps) => solid_js.JSX.Element;
 
@@ -84,2 +99,2 @@ type UsePinInputProps = Omit<pinInput.Context, 'id'> & {
 
-export { Accordion, AccordionButton, AccordionButtonProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, PinInput, PinInputField, PinInputFieldProps, PinInputProps, UseAccordionProps, UseAccordionReturn, UsePinInputProps, UsePinInputReturn, useAccordion, usePinInput };
+export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItem, AccordionItemContext, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, PinInput, PinInputField, PinInputFieldProps, PinInputProps, UseAccordionProps, UseAccordionReturn, UsePinInputProps, UsePinInputReturn, useAccordion, useAccordionItemContext, usePinInput };

dist/index.esm.js

 // src/accordion/accordion.tsx
-import { splitProps } from "solid-js";
+import { mergeProps, splitProps } from "solid-js";
 
@@ -50,9 +50,12 @@ // src/factory.tsx
 var useAccordion = (props) => {
-  const [state, send] = useMachine(
-    accordion.machine({
-      id: createUniqueId(),
-      ...props,
-      value: props.defaultValue ?? props.value
-    })
-  );
+  const initialContext = {
+    id: createUniqueId(),
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value
+  };
+  const [state, send] = useMachine(accordion.machine(initialContext), { context });
   return createMemo(() => accordion.connect(state, send, normalizeProps));
@@ -62,4 +65,4 @@ };
 // src/accordion/accordion.tsx
-function Accordion(props) {
-  const [accordionProps, htmlProps] = splitProps(props, [
+var Accordion = (props) => {
+  const [accordionProps, divProps] = splitProps(props, [
     "collapsible",
@@ -69,2 +72,4 @@ "defaultValue",
     "disabled",
+    "getRootNode",
+    "id",
     "ids",
@@ -76,5 +81,9 @@ "multiple",
   const accordion2 = useAccordion(accordionProps);
-  return <AccordionProvider value={accordion2}><ark.div {...accordion2?.().rootProps} {...htmlProps} /></AccordionProvider>;
-}
+  const mergedProps = mergeProps(accordion2().rootProps, divProps);
+  return <AccordionProvider value={accordion2}><ark.div {...mergedProps} /></AccordionProvider>;
+};
 
+// src/accordion/accordion-button.tsx
+import { mergeProps as mergeProps2 } from "solid-js";
+
 // src/accordion/accordion-item-context.ts
@@ -89,28 +98,29 @@ var [AccordionItemProvider, useAccordionItemContext] = createContext(
 // src/accordion/accordion-button.tsx
-function AccordionButton(props) {
+var AccordionButton = (props) => {
   const api = useAccordionContext();
-  const { value, disabled } = useAccordionItemContext();
-  return <ark.button {...api?.().getTriggerProps?.({
-    value,
-    disabled
-  })} {...props} />;
-}
+  const itemContext = useAccordionItemContext();
+  const mergedProps = mergeProps2(api().getTriggerProps(itemContext), props);
+  return <ark.button {...mergedProps} />;
+};
 
+// src/accordion/accordion-icon.tsx
+var AccordionIcon = (props) => <ark.div {...props} />;
+
 // src/accordion/accordion-item.tsx
-import { splitProps as splitProps2 } from "solid-js";
-function AccordionItem(props) {
+import { mergeProps as mergeProps3, splitProps as splitProps2 } from "solid-js";
+var AccordionItem = (props) => {
   const [itemProps, htmlProps] = splitProps2(props, ["value", "disabled"]);
   const api = useAccordionContext();
-  return <AccordionItemProvider value={itemProps}><ark.div {...api?.().getItemProps({ value: itemProps.value })} {...htmlProps} /></AccordionItemProvider>;
-}
+  const mergedProps = mergeProps3(api().getItemProps(itemProps), htmlProps);
+  return <AccordionItemProvider value={itemProps}><ark.div {...mergedProps} /></AccordionItemProvider>;
+};
 
 // src/accordion/accordion-panel.tsx
-function AccordionPanel(props) {
+import { mergeProps as mergeProps4 } from "solid-js";
+var AccordionPanel = (props) => {
   const api = useAccordionContext();
-  const { value, disabled } = useAccordionItemContext();
-  return <ark.div {...api?.().getContentProps({
-    value,
-    disabled
-  })} {...props} />;
-}
+  const itemContext = useAccordionItemContext();
+  const mergedProps = mergeProps4(api().getContentProps(itemContext), props);
+  return <ark.div {...mergedProps} />;
+};
 
@@ -179,2 +189,3 @@ // src/pin-input/pin-input.tsx
   AccordionButton,
+  AccordionIcon,
   AccordionItem,
@@ -185,3 +196,4 @@ AccordionPanel,
   useAccordion,
+  useAccordionItemContext,
   usePinInput
 };

package.json

 {
   "name": "@ark-ui/solid",
-  "version": "0.0.0-rc-20221125023333",
+  "version": "0.0.0-rc-20221126123806",
   "description": "",
@@ -5,0 +5,0 @@ "keywords": [],

No alert changes

Improved metrics

Total package byte prevSize

19002

increased by10.08%

Lines of code

472

increased by7.76%

No dependency changes