@hzblj/kara-components 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hzblj/kara-components
 
+## 0.22.0
+
+### Minor Changes
+
+- [#70](https://github.com/hzblj/kara-ui/pull/70) [`877e43c`](https://github.com/hzblj/kara-ui/commit/877e43cc26be5029af3c3b7c2f4cb9059c14f202) Thanks [@hzblj](https://github.com/hzblj)! - `HeaderLargeTitleFade` (`@hzblj/kara-ui/header`) fades content under the header, like segments or chips, out and back with the large title while the header search is open, in step with UIKit's animation (iOS). `ScrollViewZPosition` is removed: a large title stays in the bar when the screen's first view is not a scroll view, so the empty anchor scroll view it kept visible is no longer needed.
+
+### Patch Changes
+
+- Updated dependencies [[`877e43c`](https://github.com/hzblj/kara-ui/commit/877e43cc26be5029af3c3b7c2f4cb9059c14f202)]:
+  - @hzblj/kara-native@0.22.0
+  - @hzblj/kara-sx@0.22.0
+  - @hzblj/kara-theme@0.22.0
+
 ## 0.21.0
 
 ### Minor Changes

package/lib/module/organisms/header/header-large-title-fade.android.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export const HeaderLargeTitleFade = ({
+  children
+}) => children;
+//# sourceMappingURL=header-large-title-fade.android.js.map

package/lib/module/organisms/header/header-large-title-fade.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HeaderLargeTitleFade","children"],"sourceRoot":"../../../../src","sources":["organisms/header/header-large-title-fade.android.tsx"],"mappings":";;AAEA,OAAO,MAAMA,oBAAmD,GAAGA,CAAC;EAACC;AAAmC,CAAC,KAAKA,QAAQ","ignoreList":[]}

package/lib/module/organisms/header/header-large-title-fade.ios.js

@@ -0,0 +1,15 @@
+"use strict";
+
+import { LargeTitleFade } from '@hzblj/kara-native/swift-ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Fades its content out and back with the large title when the header search opens and closes, in step with UIKit's
+ * own animation. Keep the content mounted while searching: a `HeaderInset` moves with the bar's animation, and content
+ * mounted into it mid-animation draws off its place until the animation ends.
+ */
+export const HeaderLargeTitleFade = ({
+  children
+}) => /*#__PURE__*/_jsx(LargeTitleFade, {
+  children: children
+});
+//# sourceMappingURL=header-large-title-fade.ios.js.map

package/lib/module/organisms/header/header-large-title-fade.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LargeTitleFade","jsx","_jsx","HeaderLargeTitleFade","children"],"sourceRoot":"../../../../src","sources":["organisms/header/header-large-title-fade.ios.tsx"],"mappings":";;AAAA,SAAQA,cAAc,QAAO,6BAA6B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI1D;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAmD,GAAGA,CAAC;EAACC;AAAmC,CAAC,kBACvGF,IAAA,CAACF,cAAc;EAAAI,QAAA,EAAEA;AAAQ,CAAiB,CAC3C","ignoreList":[]}

package/lib/module/organisms/header/index.js

@@ -2,6 +2,7 @@
 
 export * from "./header.types.js";
 export * from './header-inset';
+export * from './header-large-title-fade';
 export { useIsTitleRevealed } from "./header-title.js";
 export * from './sheet-grabber';
 export * from "./use-header.js";

package/lib/module/organisms/header/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useIsTitleRevealed"],"sourceRoot":"../../../../src","sources":["organisms/header/index.ts"],"mappings":";;AAAA,cAAc,mBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,SAAQA,kBAAkB,QAAO,mBAAgB;AACjD,cAAc,iBAAiB;AAE/B,cAAc,iBAAc;AAC5B,cAAc,wBAAwB;AACtC,cAAc,+BAA4B;AAC1C,cAAc,wBAAqB;AACnC,cAAc,sBAAmB;AACjC,cAAc,+BAA4B","ignoreList":[]}
+{"version":3,"names":["useIsTitleRevealed"],"sourceRoot":"../../../../src","sources":["organisms/header/index.ts"],"mappings":";;AAAA,cAAc,mBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,2BAA2B;AACzC,SAAQA,kBAAkB,QAAO,mBAAgB;AACjD,cAAc,iBAAiB;AAE/B,cAAc,iBAAc;AAC5B,cAAc,wBAAwB;AACtC,cAAc,+BAA4B;AAC1C,cAAc,wBAAqB;AACnC,cAAc,sBAAmB;AACjC,cAAc,+BAA4B","ignoreList":[]}

package/lib/typescript/organisms/header/header-large-title-fade.d.ts

@@ -0,0 +1 @@
+export * from './header-large-title-fade.ios';

package/lib/typescript/organisms/header/header-large-title-fade.ios.d.ts

@@ -0,0 +1,7 @@
+import type { HeaderLargeTitleFadeComponent } from './header.types';
+/**
+ * Fades its content out and back with the large title when the header search opens and closes, in step with UIKit's
+ * own animation. Keep the content mounted while searching: a `HeaderInset` moves with the bar's animation, and content
+ * mounted into it mid-animation draws off its place until the animation ends.
+ */
+export declare const HeaderLargeTitleFade: HeaderLargeTitleFadeComponent;

package/lib/typescript/organisms/header/header.types.d.ts

@@ -437,4 +437,9 @@ export type HeaderInsetProps = {
     children?: ReactNode;
 };
 export type HeaderInsetComponent = (props: HeaderInsetProps) => ReactNode;
+export type HeaderLargeTitleFadeProps = {
+    /** Content under the header (segments, chips) that leaves with the large title while the header search is open. */
+    children?: ReactNode;
+};
+export type HeaderLargeTitleFadeComponent = (props: HeaderLargeTitleFadeProps) => ReactNode;
 export {};

package/lib/typescript/organisms/header/index.d.ts

@@ -1,5 +1,6 @@
 export * from './header.types';
 export * from './header-inset';
+export * from './header-large-title-fade';
 export { useIsTitleRevealed } from './header-title';
 export * from './sheet-grabber';
 export type { SheetGrabberProps } from './sheet-grabber.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -66,9 +66,9 @@
   "dependencies": {
     "@hzblj/expo-native-icons": "^0.1.0",
     "@hzblj/expo-rich-haptics": "^0.1.0",
-    "@hzblj/kara-native": "^0.21.0",
-    "@hzblj/kara-sx": "^0.21.0",
-    "@hzblj/kara-theme": "^0.21.0",
+    "@hzblj/kara-native": "^0.22.0",
+    "@hzblj/kara-sx": "^0.22.0",
+    "@hzblj/kara-theme": "^0.22.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/organisms/header/header-large-title-fade.android.tsx

@@ -0,0 +1,3 @@
+import type {HeaderLargeTitleFadeComponent, HeaderLargeTitleFadeProps} from './header.types'
+
+export const HeaderLargeTitleFade: HeaderLargeTitleFadeComponent = ({children}: HeaderLargeTitleFadeProps) => children

package/src/organisms/header/header-large-title-fade.ios.tsx

@@ -0,0 +1,12 @@
+import {LargeTitleFade} from '@hzblj/kara-native/swift-ui'
+
+import type {HeaderLargeTitleFadeComponent, HeaderLargeTitleFadeProps} from './header.types'
+
+/**
+ * Fades its content out and back with the large title when the header search opens and closes, in step with UIKit's
+ * own animation. Keep the content mounted while searching: a `HeaderInset` moves with the bar's animation, and content
+ * mounted into it mid-animation draws off its place until the animation ends.
+ */
+export const HeaderLargeTitleFade: HeaderLargeTitleFadeComponent = ({children}: HeaderLargeTitleFadeProps) => (
+  <LargeTitleFade>{children}</LargeTitleFade>
+)

package/src/organisms/header/header.types.ts

@@ -414,3 +414,10 @@ export type HeaderInsetProps = {
 }
 
 export type HeaderInsetComponent = (props: HeaderInsetProps) => ReactNode
+
+export type HeaderLargeTitleFadeProps = {
+  /** Content under the header (segments, chips) that leaves with the large title while the header search is open. */
+  children?: ReactNode
+}
+
+export type HeaderLargeTitleFadeComponent = (props: HeaderLargeTitleFadeProps) => ReactNode

package/src/organisms/header/index.ts

@@ -1,5 +1,6 @@
 export * from './header.types'
 export * from './header-inset'
+export * from './header-large-title-fade'
 export {useIsTitleRevealed} from './header-title'
 export * from './sheet-grabber'
 export type {SheetGrabberProps} from './sheet-grabber.types'