@ark-ui/solid 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -6,6 +6,30 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.3.0] - 2024-01-17
+
+### Added
+
+- Added the `Progress` component.
+- Added `valueAsString` to `onValueChange` in `DatePicker` callback details
+- Exported change details typings, for example `AccordionValueChangeDetails` or `DialogOpenChangeDetails`
+
+### Changed
+
+- Changed `Popover.Description` tag from `div` to `p`
+- Changed `PopoverDescriptionProps` type from `div` to `p`
+- Replaced the styling props for indicator with CSS variables in `RadioGroup`, `SegmentGroup`, and `Tabs`.
+
+### Fixed
+
+- Fixed multiple rerenders on `Select` component using search params
+- Fixed reactivity with collection in `Select` and `Combobox` components
+- Fixed the issue where setting `disabled` on `Combobox` does not reflect in combobox item
+- Fix an issue that breaks the `Combobox` when clicking on the input while the menu is open
+- Fixed the issue where `DatePicker` initial value isn't set when using controlled context
+- Resolved an issue that `asChild` did not work properly with `svg` elements.
+- Resolved an issue that `Menu` option item could not be activated by keyboard
+
 ## [1.2.0] - 2023-12-13
 
 ### Added

package/README.md

@@ -28,6 +28,7 @@ Ark UI is available for the following JavaScript frameworks:
 - [Pagination](https://ark-ui.com/docs/components/pagination)
 - [Pin Input](https://ark-ui.com/docs/components/pin-input)
 - [Popover](https://ark-ui.com/docs/components/popover)
+- [Progress](https://ark-ui.com/docs/components/progress)
 - [Radio Group](https://ark-ui.com/docs/components/radio-group)
 - [Range Slider](https://ark-ui.com/docs/components/slider)
 - [Rating Group](https://ark-ui.com/docs/components/rating-group)

package/cjs/index.js

@@ -21,6 +21,7 @@ var numberInput = require('@zag-js/number-input');
 var pagination = require('@zag-js/pagination');
 var pinInput = require('@zag-js/pin-input');
 var popover = require('@zag-js/popover');
+var progress = require('@zag-js/progress');
 var radio = require('@zag-js/radio-group');
 var rating = require('@zag-js/rating-group');
 var select = require('@zag-js/select');
@@ -67,6 +68,7 @@ var numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput);
 var pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination);
 var pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
 var popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover);
+var progress__namespace = /*#__PURE__*/_interopNamespaceDefault(progress);
 var radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 var rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
@@ -122,6 +124,7 @@ const spread = (node, props) => {
   const nodeEvents = Object.fromEntries(Object.keys(node).filter(prop => prop.startsWith('$$'))
   // @ts-expect-error - fix later
   .map(prop => [prop, node[prop]]));
+  const isSVG = node instanceof SVGElement;
   const childProps = solidJs.createMemo(() => mapProps(props, (key, value) => {
     const eventKey = getEventKey(key);
 
@@ -140,14 +143,14 @@ const spread = (node, props) => {
 
     // class composition
     if (key === 'class') {
-      return [node.className, value].filter(Boolean).join(' ');
+      return [node.classList.toString(), value].filter(Boolean).join(' ');
     }
 
     // don't override existing child attributes
     if (node.hasAttribute(key)) return;
     return value;
   }));
-  web.spread(node, solidJs.mergeProps(childProps));
+  web.spread(node, solidJs.mergeProps(childProps), isSVG);
 };
 
 const booleans = ['allowfullscreen', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'disabled', 'formnovalidate', 'hidden', 'indeterminate', 'ismap', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'seamless', 'selected'];
@@ -419,7 +422,7 @@ function withAsChild(Component) {
     const getChildren = solidJs.children(() => ssrSpread(localProps.children, restProps));
     solidJs.createEffect(() => {
       const children = getChildren();
-      if (children instanceof HTMLElement) {
+      if (children instanceof HTMLElement || children instanceof SVGElement) {
         spread(children, restProps);
       }
     });
@@ -1175,14 +1178,14 @@ const [ComboboxProvider, useComboboxContext] = createContext({
 
 const useCombobox = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = combobox__namespace.collection(collectionOptions);
+  const collection = () => combobox__namespace.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps({
+  const context = () => solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode,
-    collection
+    collection: collection()
   }, rest);
-  const [state, send] = solid.useMachine(combobox__namespace.machine(context), {
+  const [state, send] = solid.useMachine(combobox__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => combobox__namespace.connect(state, send, solid.normalizeProps));
@@ -2617,7 +2620,7 @@ const PopoverContent = props => {
 const PopoverDescription = props => {
   const api = usePopoverContext();
   const mergedProps = solid.mergeProps(() => api().descriptionProps, props);
-  return web.createComponent(ark.div, mergedProps);
+  return web.createComponent(ark.p, mergedProps);
 };
 
 const PopoverIndicator = props => {
@@ -2671,6 +2674,106 @@ const Popover = Object.assign(Popover$1, {
   Trigger: PopoverTrigger
 });
 
+const [ProgressProvider, useProgressContext] = createContext({
+  hookName: 'useProgressContext',
+  providerName: '<ProgressProvider />'
+});
+
+const useProgress = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(progress__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => progress__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const Progress$1 = props => {
+  const [progressProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'max', 'min', 'orientation', 'translations', 'value']);
+  const api = useProgress(progressProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(ProgressProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const ProgressCircle = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().circleProps, props);
+  return web.createComponent(ark.svg, mergedProps);
+};
+
+const ProgressCircleRange = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().circleRangeProps, props);
+  return web.createComponent(ark.circle, mergedProps);
+};
+
+const ProgressCircleTrack = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().circleTrackProps, props);
+  return web.createComponent(ark.circle, mergedProps);
+};
+
+const ProgressIndicator = props => {
+  const [state, localProps] = createSplitProps()(props, ['state']);
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().getIndicatorProps(state), localProps);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const ProgressLabel = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const ProgressRange = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().rangeProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ProgressTrack = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().trackProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ProgressValueText = props => {
+  const api = useProgressContext();
+  const mergedProps = solid.mergeProps(() => api().valueTextProps, props);
+  const getChildren = () => runIfFn(props.children, () => api().valueAsString);
+  return web.createComponent(ark.span, web.mergeProps(mergedProps, {
+    get children() {
+      return getChildren() || api().valueAsString;
+    }
+  }));
+};
+
+const Progress = Object.assign(Progress$1, {
+  Root: Progress$1,
+  Label: ProgressLabel,
+  Track: ProgressTrack,
+  Range: ProgressRange,
+  ValueText: ProgressValueText,
+  Indicator: ProgressIndicator,
+  Circle: ProgressCircle,
+  CircleTrack: ProgressCircleTrack,
+  CircleRange: ProgressCircleRange
+});
+
 const [RadioGroupProvider, useRadioGroupContext] = createContext({
   hookName: 'useRadioGroupContext',
   providerName: '<RadioGroupProvider />'
@@ -2944,14 +3047,14 @@ const [SelectProvider, useSelectContext] = createContext({
 
 const useSelect = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = select__namespace.collection(collectionOptions);
+  const collection = () => select__namespace.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
-  const context = solid.mergeProps({
+  const context = () => solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode,
-    collection
+    collection: collection()
   }, rest);
-  const [state, send] = solid.useMachine(select__namespace.machine(context), {
+  const [state, send] = solid.useMachine(select__namespace.machine(context()), {
     context
   });
   return solidJs.createMemo(() => select__namespace.connect(state, send, solid.normalizeProps));
@@ -3937,6 +4040,15 @@ exports.PopoverTrigger = PopoverTrigger;
 exports.Presence = Presence;
 exports.PresencePropsProvider = PresencePropsProvider;
 exports.PresenceProvider = PresenceProvider;
+exports.Progress = Progress;
+exports.ProgressCircle = ProgressCircle;
+exports.ProgressCircleRange = ProgressCircleRange;
+exports.ProgressCircleTrack = ProgressCircleTrack;
+exports.ProgressIndicator = ProgressIndicator;
+exports.ProgressLabel = ProgressLabel;
+exports.ProgressRange = ProgressRange;
+exports.ProgressTrack = ProgressTrack;
+exports.ProgressValueText = ProgressValueText;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RadioGroupItemControl = RadioGroupItemControl;
@@ -4038,6 +4150,7 @@ exports.usePopoverContext = usePopoverContext;
 exports.usePresence = usePresence;
 exports.usePresenceContext = usePresenceContext;
 exports.usePresencePropsContext = usePresencePropsContext;
+exports.useProgressContext = useProgressContext;
 exports.useRadioGroupContext = useRadioGroupContext;
 exports.useRadioGroupItemContext = useRadioGroupItemContext;
 exports.useRatingGroupContext = useRatingGroupContext;