@shopify/shop-minis-react 0.0.26 → 0.0.28

package/src/components/content/image-content-wrapper.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import {ContentWrapper} from '../atoms/content-wrapper'
+
+type ImageContentWrapperProps = (
+  | {publicId: string; externalId?: never}
+  | {externalId: string; publicId?: never}
+) & {
+  onLoad?: () => void
+  width?: number
+  height?: number
+  className?: string
+  Loader?: React.ReactNode | string
+}
+
+export function ImageContentWrapper({
+  onLoad,
+  width,
+  height,
+  className,
+  publicId,
+  externalId,
+  Loader,
+}: ImageContentWrapperProps) {
+  return (
+    <ContentWrapper {...(externalId ? {externalId} : {publicId: publicId!})}>
+      {({content, loading}) => {
+        if (loading) return Loader ? <>{Loader}</> : null
+
+        return (
+          <img
+            src={content?.image?.url}
+            width={width}
+            height={height}
+            alt={content?.title}
+            onLoad={onLoad}
+            className={className}
+          />
+        )
+      }}
+    </ContentWrapper>
+  )
+}

package/src/components/index.ts

@@ -6,8 +6,9 @@ export * from './commerce/merchant-card'
 export * from './commerce/product-card-skeleton'
 export * from './commerce/merchant-card-skeleton'
 export * from './commerce/quantity-selector'
+export * from './commerce/search'
 
-export * from './content/content-wrapper'
+export * from './content/image-content-wrapper'
 
 export * from './navigation/transition-container'
 export * from './navigation/transition-link'
@@ -17,6 +18,7 @@ export * from './atoms/favorite-button'
 export * from './atoms/icon-button'
 export * from './atoms/thumbhash-image'
 export * from './atoms/touchable'
+export * from './atoms/long-press-detector'
 export * from './atoms/alert-dialog'
 export * from './atoms/list'
 export * from './atoms/video-player'

package/src/components/ui/input.tsx

@@ -9,7 +9,7 @@ function Input({className, type, ...props}: React.ComponentProps<'input'>) {
       data-slot="input"
       className={cn(
         'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:outline-none',
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         className
       )}

package/src/hooks/product/useProductSearch.ts

@@ -36,6 +36,10 @@ interface UseProductSearchReturns extends PaginatedDataHookReturnsBase {
    * The products returned from the query.
    */
   products: Product[] | null
+  /**
+   * Whether the user is typing.
+   */
+  isTyping: boolean
 }
 
 export const useProductSearch = (
@@ -85,11 +89,16 @@ export const useProductSearch = (
   )
 
   const products = useMemo(() => {
+    if (debouncedQuery.trim().length === 0) {
+      return null
+    }
+
     return data ?? null
-  }, [data])
+  }, [data, debouncedQuery])
 
   return {
     ...rest,
     products,
+    isTyping: debouncedQuery !== query,
   }
 }

package/src/styles/utilities.css

@@ -20,3 +20,12 @@
 .no-scrollbars::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
+
+/* Search Bar utilities */
+
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  display: none;
+}

package/dist/components/content/content-monitor.js

@@ -1,17 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Touchable as t } from "../atoms/touchable.js";
-function i({
-  // publicId,
-  children: o
-}) {
-  return /* @__PURE__ */ r(
-    t,
-    {
-      children: o
-    }
-  );
-}
-export {
-  i as ContentMonitor
-};
-//# sourceMappingURL=content-monitor.js.map

package/dist/components/content/content-monitor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"content-monitor.js","sources":["../../../src/components/content/content-monitor.tsx"],"sourcesContent":["// import {useShopActions} from '../../internal/useShopActions'\nimport {Touchable} from '../atoms/touchable'\n\nexport function ContentMonitor({\n  // publicId,\n  children,\n}: {\n  publicId: string\n  children: React.ReactNode\n}) {\n  // const {showFeedbackSheet} = useShopActions()\n\n  return (\n    <Touchable\n    // TODO: Add long press support to Touchable\n    // onLongPress={() => {\n    //   showFeedbackSheet({publicId})\n    // }}\n    >\n      {children}\n    </Touchable>\n  )\n}\n"],"names":["ContentMonitor","children","jsx","Touchable"],"mappings":";;AAGO,SAASA,EAAe;AAAA;AAAA,EAE7B,UAAAC;AACF,GAGG;AAIC,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAME,UAAAF;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/content/content-wrapper.js

@@ -1,17 +0,0 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useContent as p } from "../../hooks/content/useContent.js";
-import { ContentMonitor as m } from "./content-monitor.js";
-function d({
-  publicId: r,
-  externalId: e,
-  children: o
-}) {
-  const { content: i, loading: t } = p({
-    identifiers: [{ publicId: r, externalId: e }]
-  }), n = i?.[0];
-  return t || !n ? o({ loading: t }) : /* @__PURE__ */ c(m, { publicId: n.publicId, children: o({ content: n, loading: t }) });
-}
-export {
-  d as ContentWrapper
-};
-//# sourceMappingURL=content-wrapper.js.map

package/dist/components/content/content-wrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"content-wrapper.js","sources":["../../../src/components/content/content-wrapper.tsx"],"sourcesContent":["import {useContent} from '../../hooks/content/useContent'\nimport {Content} from '../../types'\n\nimport {ContentMonitor} from './content-monitor'\n\ninterface BaseContentWrapperProps {\n  children: ({\n    content,\n    loading,\n  }: {\n    content?: Content\n    loading: boolean\n  }) => JSX.Element | null\n}\n\ninterface PublicIdContentWrapperProps extends BaseContentWrapperProps {\n  publicId: string\n  externalId?: never\n}\n\ninterface ExternalIdContentWrapperProps extends BaseContentWrapperProps {\n  externalId: string\n  publicId?: never\n}\n\ntype ContentWrapperProps =\n  | PublicIdContentWrapperProps\n  | ExternalIdContentWrapperProps\n\n// It's too messy in the docs to show the complete types here so we show a simplified version\nexport interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {\n  publicId?: string\n  externalId?: string\n}\n\nexport function ContentWrapper({\n  publicId,\n  externalId,\n  children,\n}: ContentWrapperProps) {\n  const {content, loading} = useContent({\n    identifiers: [{publicId, externalId}],\n  })\n\n  const contentItem = content?.[0]\n\n  if (loading || !contentItem) {\n    return children({loading})\n  }\n\n  return (\n    <ContentMonitor publicId={contentItem.publicId}>\n      {children({content: contentItem, loading})}\n    </ContentMonitor>\n  )\n}\n"],"names":["ContentWrapper","publicId","externalId","children","content","loading","useContent","contentItem","jsx","ContentMonitor"],"mappings":";;;AAmCO,SAASA,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AACF,GAAwB;AACtB,QAAM,EAAC,SAAAC,GAAS,SAAAC,EAAO,IAAIC,EAAW;AAAA,IACpC,aAAa,CAAC,EAAC,UAAAL,GAAU,YAAAC,EAAW,CAAA;AAAA,EAAA,CACrC,GAEKK,IAAcH,IAAU,CAAC;AAE3B,SAAAC,KAAW,CAACE,IACPJ,EAAS,EAAC,SAAAE,GAAQ,IAIzB,gBAAAG,EAACC,GAAe,EAAA,UAAUF,EAAY,UACnC,UAASJ,EAAA,EAAC,SAASI,GAAa,SAAAF,EAAO,CAAC,EAC3C,CAAA;AAEJ;"}

package/src/components/content/content-monitor.tsx

@@ -1,23 +0,0 @@
-// import {useShopActions} from '../../internal/useShopActions'
-import {Touchable} from '../atoms/touchable'
-
-export function ContentMonitor({
-  // publicId,
-  children,
-}: {
-  publicId: string
-  children: React.ReactNode
-}) {
-  // const {showFeedbackSheet} = useShopActions()
-
-  return (
-    <Touchable
-    // TODO: Add long press support to Touchable
-    // onLongPress={() => {
-    //   showFeedbackSheet({publicId})
-    // }}
-    >
-      {children}
-    </Touchable>
-  )
-}