Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(transition): Updated useFixedPositioning to merge style objects
  • Loading branch information
mlaursen committed Apr 14, 2021
1 parent ced550a commit 1ab84d7
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 9 deletions.
7 changes: 4 additions & 3 deletions packages/form/src/select/Select.tsx
Expand Up @@ -190,7 +190,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
labelClassName,
displayLabelStyle,
displayLabelClassName,
listboxStyle,
listboxStyle: propListboxStyle,
listboxClassName,
anchor = BELOW_CENTER_ANCHOR,
theme: propTheme,
Expand Down Expand Up @@ -286,12 +286,13 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
});

const {
style: fixedStyle,
style: listboxStyle,
onEnter,
onEntering,
onEntered,
onExited,
} = useFixedPositioning({
style: propListboxStyle,
fixedTo: () => ref.current,
anchor,
onScroll: closeOnScroll ? hide : undefined,
Expand Down Expand Up @@ -393,7 +394,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
<Listbox
id={listboxId}
aria-labelledby={id}
style={{ ...fixedStyle, ...listboxStyle }}
style={listboxStyle}
className={listboxClassName}
name={name}
readOnly={readOnly}
Expand Down
30 changes: 24 additions & 6 deletions packages/transition/src/useFixedPositioning.ts
Expand Up @@ -66,6 +66,23 @@ export interface FixedPositioningOptions
*/
fixedTo: FixedTo;

/**
* An optional style object to merge and override the generated fixed
* positioning styles.
*
* @example
* Overriding
* ```ts
* useFixedPositioning({
* // this will force the `top` to always be `0`
* style: { top: 0 },
* });
* ```
*
* @remarks \@since 2.8.0
*/
style?: CSSProperties;

/**
* An optional function to call to dynamically get the options when the node
* has been added to the DOM. This is helpful if you need to check sizes or other
Expand All @@ -79,7 +96,7 @@ export interface FixedPositioningOptions
* event has occurred. The main use-case for this is hiding the fixed element when
* the page is resized.
*/
onResize?: (event: Event) => void;
onResize?(event: Event): void;

/**
* An optional function to call when the element is in the DOM and a window scroll
Expand Down Expand Up @@ -119,9 +136,9 @@ function getFixedTo(fixedTo: FixedTo): HTMLElement | null {
return fixedTo;
}

interface ReturnValue extends Required<TransitionHooks> {
style?: CSSProperties;
updateStyle: () => void;
interface FixedPositioningHookReturnValue extends Required<TransitionHooks> {
style: CSSProperties;
updateStyle(): void;
}

/**
Expand All @@ -138,6 +155,7 @@ interface ReturnValue extends Required<TransitionHooks> {
* It is recommended to start the exit animation when that happens though.
*/
export function useFixedPositioning({
style: propStyle,
onEnter,
onEntering,
onEntered,
Expand All @@ -159,7 +177,7 @@ export function useFixedPositioning({
preventOverlap = false,
disableSwapping = false,
disableVHBounds = false,
}: FixedPositioningOptions): ReturnValue {
}: FixedPositioningOptions): FixedPositioningHookReturnValue {
const [style, setStyle] = useState<CSSProperties | undefined>();
const [element, setElement] = useState<HTMLElement | null>(null);

Expand Down Expand Up @@ -326,7 +344,7 @@ export function useFixedPositioning({
}, [initialX, initialY]);

return {
style,
style: { ...style, ...propStyle },
updateStyle,
onEnter: handleEnter,
onEntering: handleEntering,
Expand Down

0 comments on commit 1ab84d7

Please sign in to comment.