@bi-digital/react 0.2.22 → 0.2.24

package/dist/popover-trigger-context-CGJlUS_N.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-trigger-context-CGJlUS_N.js","names":[],"sources":["../src/components/popover/popover-trigger-context.tsx"],"sourcesContent":["import { createContext, useId, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nexport const Context = createContext<{\n  popoverId?: string;\n  setPopoverId?: (id: string) => void;\n  popoverOpen?: boolean;\n  setPopoverOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}>({});\n\nexport type PopoverTriggerContextProps = {\n  children: ReactNode;\n};\n\n/**\n * PopoverTriggerContext component, use to wrap a PopoverTrigger and Popover.\n *\n * @example\n * <PopoverTriggerContext>\n *   <PopoverTrigger>Open Popover</PopoverTrigger>\n *   <Popover>\n *     Content\n *   </Popover>\n * </PopoverTriggerContext>\n */\nexport const PopoverTriggerContext = ({ children }: PopoverTriggerContextProps) => {\n  const randomPopoverId = useId();\n  const [popoverId, setPopoverId] = useState(randomPopoverId);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  return <Context value={{ popoverId, setPopoverId, popoverOpen, setPopoverOpen }}>{children}</Context>;\n};\n"],"mappings":";;;;AAGA,MAAa,UAAU,cAKpB,CAAE,EAAC;;;;;;;;;;;;AAiBN,MAAa,wBAAwB,CAAC,EAAE,UAAsC,KAAK;CACjF,MAAM,kBAAkB,OAAO;CAC/B,MAAM,CAAC,WAAW,aAAa,GAAG,SAAS,gBAAgB;CAC3D,MAAM,CAAC,aAAa,eAAe,GAAG,SAAS,MAAM;AAErD,wBAAO,IAAC;EAAQ,OAAO;GAAE;GAAW;GAAc;GAAa;EAAgB;EAAG;GAAmB;AACtG"}

package/dist/search-CdV5su_L.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-CdV5su_L.js","names":["e: React.FormEvent<HTMLFormElement>"],"sources":["../src/components/search/search.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport { Field, FieldAffixes, FieldAffix } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { BiIconCrossSmall, BiIconMagnefyingGlass } from '@bi-digital/icons-react';\nimport type { MergeRight } from '../../utilities';\nimport { Button } from '../button';\n\nexport type SearchProps = MergeRight<\n  Omit<InputProps, 'type' | 'size'>,\n  {\n    /**\n     * Size of the search.\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /** Called when the user presses enter. You can use this to for example navigate on submit. */\n    onSubmit?: (value: string) => void;\n    /** Called when the user resets the search input. */\n    onReset?: (value: string) => void;\n    /**\n     * Aria-label for the clear button.\n     * @defaultValue 'Clear'\n     */\n    clearAriaLabel?: string;\n  }\n>;\n\nexport const Search = ({\n  className,\n  onSubmit,\n  onReset,\n  clearAriaLabel = 'Clear',\n  size = 'medium',\n  ref,\n  dark,\n  style,\n  ...props\n}: SearchProps) => {\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (onSubmit) {\n      const input = e.currentTarget.querySelector('input');\n      onSubmit(input?.value || '');\n    }\n  };\n  const handleReset = () => {\n    if (onReset) {\n      onReset('');\n    }\n  };\n  return (\n    <Field className={clsx('bi-search', className)} data-dark={dark} style={style} asChild>\n      <form onSubmit={handleSubmit} onReset={handleReset}>\n        <FieldAffixes>\n          <FieldAffix>\n            <BiIconMagnefyingGlass size={size} />\n          </FieldAffix>\n          <Input type='text' ref={ref} size={size} dark={dark} {...props} />\n          <FieldAffix aria-hidden='false'>\n            <Button aria-label={clearAriaLabel} icon size={size} dark={dark} variant='text' type='reset'>\n              <BiIconCrossSmall size={size} aria-hidden='true' />\n            </Button>\n          </FieldAffix>\n        </FieldAffixes>\n      </form>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAa,SAAS,CAAC,EACrB,WACA,UACA,SACA,iBAAiB,SACjB,OAAO,UACP,KACA,MACA,MACA,GAAG,OACS,KAAK;CACjB,MAAM,eAAe,CAACA,MAAwC;AAC5D,IAAE,gBAAgB;AAClB,MAAI,UAAU;GACZ,MAAM,QAAQ,EAAE,cAAc,cAAc,QAAQ;AACpD,YAAS,OAAO,SAAS,GAAG;EAC7B;CACF;CACD,MAAM,cAAc,MAAM;AACxB,MAAI,QACF,SAAQ,GAAG;CAEd;AACD,wBACE,IAAC;EAAM,WAAW,KAAK,aAAa,UAAU;EAAE,aAAW;EAAa;EAAO;4BAC7E,IAAC;GAAK,UAAU;GAAc,SAAS;6BACrC,KAAC;oBACC,IAAC,wCACC,IAAC,yBAA4B,OAAQ,GAC1B;oBACb,IAAC;KAAM,MAAK;KAAY;KAAW;KAAY;KAAM,GAAI;MAAS;oBAClE,IAAC;KAAW,eAAY;+BACtB,IAAC;MAAO,cAAY;MAAgB;MAAW;MAAY;MAAM,SAAQ;MAAO,MAAK;gCACnF,IAAC;OAAuB;OAAM,eAAY;QAAS;OAC5C;MACE;OACA;IACV;GACD;AAEX"}

package/dist/sub-navbar-DEudSxfj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sub-navbar-DEudSxfj.js","names":[],"sources":["../src/components/navbar/sub-navbar.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport { useRef, type HTMLAttributes, type Ref } from 'react';\nimport type { MergeRight } from '../../utilities';\nimport type { DefaultProps } from '../../types';\nimport { useElementScrolledPastObserver } from '../../utilities/hooks/useElementScrolledPastObserver/useElementScrolledPastObserver';\nimport { useScrollDirection } from '../../utilities/hooks/useScrollDirection/useScrollDirection';\n\nexport type SubNavbarProps = MergeRight<\n  DefaultProps & HTMLAttributes<HTMLDivElement>,\n  {\n    ref?: Ref<HTMLElement>;\n  }\n>;\n\nexport const SubNavbar = ({ dark = false, children, className, ref, ...props }: SubNavbarProps) => {\n  const elementRef = useRef<HTMLDivElement>(null);\n  const fixed = useElementScrolledPastObserver(elementRef);\n  const scrollDirection = useScrollDirection();\n\n  return (\n    <div className='bi-sub-navbar--wrapper'>\n      <div ref={elementRef} />\n      <nav\n        className={clsx('bi-sub-navbar', className)}\n        data-fixed={fixed}\n        data-scroll-dir={fixed ? scrollDirection : undefined}\n        data-dark={dark}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </nav>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAcA,MAAa,YAAY,CAAC,EAAE,OAAO,OAAO,UAAU,WAAW,IAAK,GAAG,OAAuB,KAAK;CACjG,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,QAAQ,+BAA+B,WAAW;CACxD,MAAM,kBAAkB,oBAAoB;AAE5C,wBACE,KAAC;EAAI,WAAU;6BACb,IAAC,SAAI,KAAK,aAAc,kBACxB,IAAC;GACC,WAAW,KAAK,iBAAiB,UAAU;GAC3C,cAAY;GACZ,mBAAiB,QAAQ;GACzB,aAAW;GACX,GAAI;GACC;GAEJ;IACG;GACF;AAET"}

package/dist/textfield-CdqVq5R0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"textfield-CdqVq5R0.js","names":[],"sources":["../src/components/textfield/textfield.tsx"],"sourcesContent":["import { useId, type ReactNode, type Ref } from 'react';\n\nimport type { DefaultProps, LabelRequiredProps } from '../../types';\nimport { Field, FieldAffix, FieldAffixes, FieldDescription } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\nimport { Textarea, type TextareaProps } from '../textarea';\nimport { ValidationMessage } from '../validation-message';\n\ntype InputPropsFiltered = Omit<InputProps, 'prefix' | 'className' | 'style'>;\ntype TextareaPropsFiltered = Omit<TextareaProps, 'prefix' | 'className' | 'style'>;\n\ntype BaseTextfieldProps = LabelRequiredProps &\n  DefaultProps & {\n    /** Label */\n    label?: ReactNode;\n    /** Description */\n    description?: ReactNode;\n    /** Prefix */\n    prefix?: string;\n    /** Suffix */\n    suffix?: string;\n    /** Error message for field */\n    error?: ReactNode;\n    /** `className` for the `Field` element */\n    className?: InputProps['className'];\n    /** `style` for the `Field` element */\n    style?: InputProps['style'];\n  };\n\ntype TextfieldTextareaProps = {\n  /** Render `Textarea` instead of a `Input`. The `Textarea` has support for multiple rows of input. */\n  multiline: true;\n} & TextareaPropsFiltered;\n\ntype TextfieldInputProps = {\n  /** Render `Textarea` instead of a `Input`. The `Textarea` has support for multiple rows of input. */\n  multiline?: never | false;\n} & InputPropsFiltered;\n\nexport type TextfieldProps = BaseTextfieldProps &\n  // We use either Textarea or Input props, depending on the `multiline` prop.\n  (TextfieldTextareaProps | TextfieldInputProps) & {\n    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n  };\n\nexport const Textfield = ({\n  dark,\n  label,\n  description,\n  error,\n  multiline,\n  prefix,\n  suffix,\n  style,\n  className,\n  ref,\n  id: idProp,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: TextfieldProps) => {\n  const generatedId = useId();\n  const descriptionId = useId();\n  const validationId = useId();\n  const id = idProp || generatedId;\n\n  const ariaDescribedBy =\n    [description ? descriptionId : '', error ? validationId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n  return (\n    <Field className={className} data-dark={dark} style={style}>\n      {label && <Label htmlFor={id}>{label}</Label>}\n      {description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}\n      <FieldAffixes>\n        {prefix && <FieldAffix>{prefix}</FieldAffix>}\n        {multiline ? (\n          <Textarea\n            id={id}\n            ref={ref as Ref<HTMLTextAreaElement>}\n            aria-invalid={Boolean(error) || undefined}\n            aria-describedby={ariaDescribedBy}\n            dark={dark}\n            {...(props as TextareaPropsFiltered)}\n          />\n        ) : (\n          <Input\n            id={id}\n            ref={ref as Ref<HTMLInputElement>}\n            aria-invalid={Boolean(error) || undefined}\n            aria-describedby={ariaDescribedBy}\n            dark={dark}\n            {...(props as InputPropsFiltered)}\n          />\n        )}\n        {suffix && <FieldAffix>{suffix}</FieldAffix>}\n      </FieldAffixes>\n      {!!error && <ValidationMessage id={validationId}>{error}</ValidationMessage>}\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;;;;AA8CA,MAAa,YAAY,CAAC,EACxB,MACA,OACA,aACA,OACA,WACA,QACA,QACA,OACA,WACA,KACA,IAAI,QACJ,oBAAoB,oBACpB,GAAG,OACY,KAAK;CACpB,MAAM,cAAc,OAAO;CAC3B,MAAM,gBAAgB,OAAO;CAC7B,MAAM,eAAe,OAAO;CAC5B,MAAM,KAAK,UAAU;CAErB,MAAM,kBACJ;EAAC,cAAc,gBAAgB;EAAI,QAAQ,eAAe;EAAI;CAAoB,EAAC,KAAK,IAAI,CAAC,MAAM;AACrG,wBACE,KAAC;EAAiB;EAAW,aAAW;EAAa;;GAClD,yBAAS,IAAC;IAAM,SAAS;cAAK;KAAc;GAC5C,+BAAe,IAAC;IAAiB,IAAI;cAAgB;KAA+B;mBACrF,KAAC;IACE,0BAAU,IAAC,wBAAY,SAAoB;IAC3C,4BACC,IAAC;KACK;KACC;KACL,gBAAc,QAAQ,MAAM;KAC5B,oBAAkB;KACZ;KACN,GAAK;MACL,mBAEF,IAAC;KACK;KACC;KACL,gBAAc,QAAQ,MAAM;KAC5B,oBAAkB;KACZ;KACN,GAAK;MACL;IAEH,0BAAU,IAAC,wBAAY,SAAoB;OAC/B;KACZ,yBAAS,IAAC;IAAkB,IAAI;cAAe;KAA0B;;GACtE;AAEX"}

package/dist/useElementScrolledPastObserver-DjzJ4Mn-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementScrolledPastObserver-DjzJ4Mn-.js","names":["elementRef: RefObject<HTMLElement | null>"],"sources":["../src/utilities/hooks/useElementScrolledPastObserver/useElementScrolledPastObserver.tsx"],"sourcesContent":["import { useEffect, useState, type RefObject } from 'react';\n\n/** Detects when an element's is scrolled past and is no longer in the viewport. */\nexport const useElementScrolledPastObserver = (elementRef: RefObject<HTMLElement | null>): boolean => {\n  const [isPast, setIsPast] = useState(false);\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(([entry]) => setIsPast(entry.boundingClientRect.y < 0), {\n      threshold: [0],\n    });\n    const currentRef = elementRef.current;\n    if (currentRef) observer.observe(currentRef);\n    return () => {\n      if (currentRef) observer.unobserve(currentRef);\n    };\n  }, [elementRef]);\n  return isPast;\n};\n"],"mappings":";;;;AAGA,MAAa,iCAAiC,CAACA,eAAuD;CACpG,MAAM,CAAC,QAAQ,UAAU,GAAG,SAAS,MAAM;AAE3C,WAAU,MAAM;EACd,MAAM,WAAW,IAAI,qBAAqB,CAAC,CAAC,MAAM,KAAK,UAAU,MAAM,mBAAmB,IAAI,EAAE,EAAE,EAChG,WAAW,CAAC,CAAE,EACf;EACD,MAAM,aAAa,WAAW;AAC9B,MAAI,WAAY,UAAS,QAAQ,WAAW;AAC5C,SAAO,MAAM;AACX,OAAI,WAAY,UAAS,UAAU,WAAW;EAC/C;CACF,GAAE,CAAC,UAAW,EAAC;AAChB,QAAO;AACR"}

package/dist/useMergeRefs-iCenhgmf.d.ts

@@ -1,11 +0,0 @@
-import { Ref, RefCallback } from "react";
-
-//#region src/utilities/hooks/useMergeRefs/useMergeRefs.d.ts
-
-/**
- * Merges an array of refs into a single memoized callback ref or `null`.
- */
-declare function useMergeRefs<Instance>(refs: Array<Ref<Instance> | undefined>): null | RefCallback<Instance>;
-//#endregion
-export { useMergeRefs };
-//# sourceMappingURL=useMergeRefs-iCenhgmf.d.ts.map

package/dist/utilities/hooks/useElementScrolledPastObserver/useElementScrolledPastObserver.d.ts

@@ -1,8 +0,0 @@
-import { RefObject } from "react";
-
-//#region src/utilities/hooks/useElementScrolledPastObserver/useElementScrolledPastObserver.d.ts
-/** Detects when an element's is scrolled past and is no longer in the viewport. */
-declare const useElementScrolledPastObserver: (elementRef: RefObject<HTMLElement | null>) => boolean;
-//#endregion
-export { useElementScrolledPastObserver };
-//# sourceMappingURL=useElementScrolledPastObserver.d.ts.map

package/dist/utilities/hooks/useElementScrolledPastObserver/useElementScrolledPastObserver.js

@@ -1,3 +0,0 @@
-import { useElementScrolledPastObserver } from "../../../useElementScrolledPastObserver-DjzJ4Mn-.js";
-
-export { useElementScrolledPastObserver };