@mackin.com/styleguide 9.3.2 → 9.4.0

package/index.d.ts

@@ -51,7 +51,7 @@ interface AutocompleteProps extends BaseInputProps$1 {
     allowScroll?: boolean;
     /** Delay before the input is re-focused after picking a value.  Adjust if there are issues with the displayed input value after pick.  Defaults to 100ms. */
     onPickFocusWaitMs?: number;
-    onPick: (value: string | undefined) => void;
+    onPick: (value: string | undefined, index?: number) => void;
 }
 declare const Autocomplete: (p: AutocompleteProps) => JSX.Element;
 
@@ -566,12 +566,22 @@ interface Props<T> extends PagerStyleProps {
 }
 declare const BoundStaticPager: <T>(p: Props<T>) => JSX.Element;
 
+interface PagedResultDto<T> {
+    total: number;
+    /** The zero-based page index. */
+    page: number;
+    limit: number;
+    items: T[];
+}
+
 /** A page of data with helpers props.  */
 declare class PagedResult<T> {
     constructor(items?: T[], total?: number, page?: number, limit?: number);
+    /** @deprecated Use fromPagedResultDto going forward. */
     static fromDto<T>(dto: {
         [key: string]: any;
     }): PagedResult<T>;
+    static fromPagedResultDto<TDto, TDomain>(dto: PagedResultDto<TDto>, convert?: (dto: TDto) => TDomain): PagedResult<TDomain>;
     total: number;
     /** The zero-based page index. */
     page: number;
@@ -597,9 +607,7 @@ declare class PagedResult<T> {
     getPreviousItem(fromItem: T): T | undefined;
     getNextItem(fromItem: T): T | undefined;
     getPagingRange(radius: number): number[];
-    toJSON(): {
-        [key: string]: any;
-    };
+    toJSON(): PagedResultDto<T>;
     clone(newItems?: T[]): PagedResult<T>;
 }
 

package/index.js

@@ -966,7 +966,7 @@ const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
     var _a;
-    const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
+    const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "listItemButtonClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
     const theme = useThemeSafely();
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
@@ -1020,7 +1020,11 @@ const Autocomplete = (p) => {
         setTimeout(() => {
             // blur is now complete
             var _a;
-            p.onPick(v);
+            let index = v ? p.options.findIndex(o => o === v) : undefined;
+            if (index !== undefined && index < 0) {
+                index = undefined;
+            }
+            p.onPick(v, index);
             // wait for the re-render.  the value will not update if the control has focus
             setTimeout(() => {
                 var _a;
@@ -3223,9 +3227,14 @@ class PagedResult {
         this.limit = limit;
         this.total = total;
     }
+    /** @deprecated Use fromPagedResultDto going forward. */
     static fromDto(dto) {
         return new PagedResult(dto.items, dto.total, dto.page, dto.limit);
     }
+    static fromPagedResultDto(dto, convert) {
+        const items = convert ? dto.items.map(convert) : dto.items;
+        return new PagedResult(items, dto.total, dto.page, dto.limit);
+    }
     /** Helper for items.length */
     get length() {
         return this.items ? this.items.length : 0;
@@ -3697,10 +3706,19 @@ const GlobalStyles = (p) => {
 const Slider = (p) => {
     var _a;
     const theme = useThemeSafely();
-    const currentValue = React.useRef(p.value);
     const sliderContainer = React.useRef(null);
     const sliderHandleSize = (_a = p.sliderHandleSize) !== null && _a !== void 0 ? _a : theme.controls.height;
     const height = p.showValue ? `calc(${sliderHandleSize} + 1.5rem)` : sliderHandleSize;
+    // we're keeping this value in a ref vs. state so the constant updates don't cause re-render.
+    // we will have to respond to outside value changes after the fact however...
+    const currentValue = React.useRef(p.value);
+    const [, forceUpdate] = React.useState(Date.now());
+    React.useEffect(() => {
+        if (p.value !== currentValue.current) {
+            currentValue.current = p.value;
+            forceUpdate(Date.now());
+        }
+    }, [p.value]);
     return (React__default['default'].createElement("div", { ref: sliderContainer, className: css.cx(css.css({
             label: 'Slider',
             width: '100%',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "9.3.2",
+    "version": "9.4.0",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",