@atom-learning/components 10.0.1 → 10.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/action-icon/ActionIcon.js +1 -1
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/badge/BadgeText.js +1 -1
- package/dist/components/badge/BadgeText.js.map +1 -1
- package/dist/components/banner/BannerContainer.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularActions.js +1 -1
- package/dist/components/banner/banner-regular/BannerRegularActions.js.map +1 -1
- package/dist/components/calendar/Calendar.js +2 -2
- package/dist/components/calendar/Calendar.js.map +1 -1
- package/dist/components/carousel/Carousel.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupAllItem.js +3 -2
- package/dist/components/checkbox-group/CheckboxGroupAllItem.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupChecked.context.js +1 -1
- package/dist/components/checkbox-group/CheckboxGroupChecked.context.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupMounted.context.js +1 -1
- package/dist/components/checkbox-group/CheckboxGroupMounted.context.js.map +1 -1
- package/dist/components/chip/Chip.js +2 -2
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/create-password-field/CreatePasswordField.js +5 -5
- package/dist/components/create-password-field/CreatePasswordField.js.map +1 -1
- package/dist/components/data-table/DataTableHeaderCell.js +8 -8
- package/dist/components/data-table/DataTableHeaderCell.js.map +1 -1
- package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js.map +1 -1
- package/dist/components/data-table/getNewAsyncData.js +1 -1
- package/dist/components/data-table/getNewAsyncData.js.map +1 -1
- package/dist/components/date-input/DateInput.js.map +1 -1
- package/dist/components/file-drop/FileDrop.js +2 -2
- package/dist/components/file-drop/FileDrop.js.map +1 -1
- package/dist/components/form/useFieldError.js +2 -1
- package/dist/components/form/useFieldError.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.js +1 -1
- package/dist/components/navigation/NavigationMenu.js.map +1 -1
- package/dist/components/pagination/PaginationItems.js +2 -2
- package/dist/components/pagination/PaginationItems.js.map +1 -1
- package/dist/components/pagination/pagination.helper.js +5 -3
- package/dist/components/pagination/pagination.helper.js.map +1 -1
- package/dist/components/select-menu/SelectMenu.d.ts +16 -9
- package/dist/components/select-menu/SelectMenu.js +6 -4
- package/dist/components/select-menu/SelectMenu.js.map +1 -1
- package/dist/components/select-menu/SelectMenuContent.d.ts +5 -3
- package/dist/components/select-menu/SelectMenuContent.js +24 -65
- package/dist/components/select-menu/SelectMenuContent.js.map +1 -1
- package/dist/components/select-menu/SelectMenuItem.d.ts +5 -3
- package/dist/components/select-menu/SelectMenuItem.js +15 -15
- package/dist/components/select-menu/SelectMenuItem.js.map +1 -1
- package/dist/components/select-menu/SelectMenuLabel.d.ts +2 -2
- package/dist/components/select-menu/SelectMenuLabel.js +2 -2
- package/dist/components/select-menu/SelectMenuLabel.js.map +1 -1
- package/dist/components/select-menu/SelectMenuSeparator.d.ts +2 -2
- package/dist/components/select-menu/SelectMenuSeparator.js +2 -2
- package/dist/components/select-menu/SelectMenuSeparator.js.map +1 -1
- package/dist/components/select-menu/SelectMenuTrigger.d.ts +3 -2
- package/dist/components/select-menu/SelectMenuTrigger.js +12 -12
- package/dist/components/select-menu/SelectMenuTrigger.js.map +1 -1
- package/dist/components/select-menu-field/SelectMenuField.js +5 -5
- package/dist/components/select-menu-field/SelectMenuField.js.map +1 -1
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/slider-field/SliderField.js +2 -1
- package/dist/components/slider-field/SliderField.js.map +1 -1
- package/dist/components/stepper/Stepper.js +1 -1
- package/dist/components/stepper/Stepper.js.map +1 -1
- package/dist/components/stepper/StepperSteps.js +7 -5
- package/dist/components/stepper/StepperSteps.js.map +1 -1
- package/dist/components/table/useStickyColumnsCss.js +1 -1
- package/dist/components/table/useStickyColumnsCss.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +131 -159
- package/dist/index.cjs.js.map +1 -1
- package/dist/styled.js +15 -11
- package/dist/styled.js.map +1 -1
- package/dist/utilities/hooks/useResizeObserver.js +1 -3
- package/dist/utilities/hooks/useResizeObserver.js.map +1 -1
- package/dist/utilities/uri/index.js +2 -1
- package/dist/utilities/uri/index.js.map +1 -1
- package/package.json +15 -7
|
@@ -5,7 +5,7 @@ import { getExternalAnchorProps } from "../../utilities/uri/index.js";
|
|
|
5
5
|
import { ActionIconSizeMap } from "./ActionIcon.constants.js";
|
|
6
6
|
import * as React$1 from "react";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
|
-
import invariant from "invariant";
|
|
8
|
+
import invariant from "tiny-invariant";
|
|
9
9
|
//#region src/components/action-icon/ActionIcon.tsx
|
|
10
10
|
var StyledButton = styled("button", {
|
|
11
11
|
base: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\n\nimport { styled } from '../../styled'\nimport type { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { OptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-white',\n 'rounded-md',\n 'box-border',\n 'cursor-pointer',\n 'flex',\n 'shrink-0',\n 'justify-center',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n neutral: [\n '[--solid-base:var(--color-white)]',\n '[--solid-interact:var(--color-grey-100)]',\n '[--solid-active:var(--color-grey-200)]',\n '[--solid-text:var(--color-grey-1200)]',\n '[--base:var(--color-grey-700)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1100)]'\n ],\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n primaryDark: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n white: [\n '[--base:var(--color-white)]',\n '[--interact:var(--color-white)]',\n '[--active:var(--color-white)]'\n ]\n },\n appearance: {\n simple: [\n 'bg-transparent',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n outline: [\n 'bg-[unset]',\n 'border',\n 'border-current',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n solid: [\n 'bg-(--solid-base,var(--base))',\n 'text-(--solid-text,white)',\n 'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n 'not-disabled:hover:text-(--solid-text,white)',\n 'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n 'not-disabled:focus:text-(--solid-text,white)',\n 'not-disabled:active:bg-(--solid-active,var(--active))'\n ]\n },\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12']\n },\n isRounded: {\n true: ['rounded-full']\n }\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n as?: React.ElementType\n children: React.ReactNode\n label: string\n } & Omit<OptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon = ({\n ref,\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...rest\n}: ActionIconProps) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n // Polymorphic props: can be either button or anchor element\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? undefined : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...getExternalAnchorProps(href)}\n {...rest}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string]\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,aAAa;IACX;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;EAChB;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAYA,IAAa,cAAc,EACzB,KACA,UACA,QAAQ,WACR,aAAa,UACb,OAAO,MACP,OACA,MACA,UACA,aAAa,MACb,aACA,GAAG,WACkB;CACrB,MAAM,2BAA2B,YAAY,KAAK,KAAK;CAEvD,UAAU,QAAM,SAAS,MAAM,QAAQ,MAAM,GAAG,wBAAwB;CAYxE,OACE,oBAAC,wBAAD;EACc;EACL;EACM;YAEb,oBAAC,cAAD;GACE,GAhBoB,OACrB;IACC,IAAI;IACJ,MAAM,WAAW,KAAA,IAAY;IAC7B,SAAS,KAAA;IACT,iBAAiB,CAAC,CAAC;GACrB,IACC,EAAE,MAAM,SAAS;GAUhB,GAAI,uBAAuB,IAAI;GAC/B,GAAI;GACJ,cAAY;GACL;GACK;GACN;GACD;GACK;aAET,QAAM,SAAS,IAAI,WAAW,UAAU;IAGvC,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MAAM,wBAAwB;IAG1C,UACE,MAAM,SAAS,MACf,oBAAoB,OAAO,KAAK,6BAA6B,KAAK,KAAK,oCACzE;IAEA,OAAO,QAAM,aACX,OACA,EACE,MAAM,kBAAkB,MAC1B,CACF;GACF,CAAC;EACW,CAAA;CACQ,CAAA;AAE5B"}
|
|
@@ -11,7 +11,7 @@ var ObserveBadgeTextOverflow = ({ elRef }) => {
|
|
|
11
11
|
const { setIsOverflowing } = React$1.use(BadgeContext);
|
|
12
12
|
useResizeObserver({
|
|
13
13
|
delay: 0,
|
|
14
|
-
elements: [elRef],
|
|
14
|
+
elements: React$1.useMemo(() => [elRef], [elRef]),
|
|
15
15
|
onResize: () => {
|
|
16
16
|
if (!elRef?.scrollWidth || !elRef?.clientWidth) return;
|
|
17
17
|
setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '../../utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.FC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.use(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements
|
|
1
|
+
{"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '../../utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.FC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.use(BadgeContext)\n\n // `elements` feeds the observe effect's dependency array, so it must keep a\n // stable identity across renders — a fresh `[elRef]` literal would re-subscribe\n // the observer every render.\n const elements = React.useMemo(() => [elRef], [elRef])\n\n useResizeObserver({\n delay: 0,\n elements,\n onResize: () => {\n if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n base: ['py-0.5', 'capsize-none'],\n variants: {\n overflow: {\n ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n wrap: ['whitespace-normal']\n }\n }\n})\n\ntype BadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({ children, ...rest }: BadgeTextProps) => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.use(BadgeContext)\n\n const size = overrideStyledVariantValue(badgeSize, (s) => toTextSize[s])\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText size={size} overflow={overflow} ref={setElRef} {...rest}>\n {children}\n </StyledBadgeText>\n </>\n )\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAM,4BAAqE,EACzE,YACI;CACJ,MAAM,EAAE,qBAAqB,QAAM,IAAI,YAAY;CAOnD,kBAAkB;EAChB,OAAO;EACP,UAJe,QAAM,cAAc,CAAC,KAAK,GAAG,CAAC,KAAK,CAIlD;EACA,gBAAgB;GACd,IAAI,CAAC,OAAO,eAAe,CAAC,OAAO,aAAa;GAChD,mBAAmB,MAAM,cAAc,MAAM,WAAW;EAC1D;CACF,CAAC;CAED,OAAO;AACT;AAEA,IAAM,kBAAkB,OAAO,MAAM;CACnC,MAAM,CAAC,UAAU,cAAc;CAC/B,UAAU,EACR,UAAU;EACR,UAAU;GAAC;GAAqB;GAAiB;EAAmB;EACpE,MAAM,CAAC,mBAAmB;CAC5B,EACF;AACF,CAAC;AAID,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAAa,EAAE,UAAU,GAAG,WAA2B;CAElE,MAAM,EAAE,MAAM,WAAW,aAAa,QAAM,IAAI,YAAY;CAE5D,MAAM,OAAO,2BAA2B,YAAY,MAAM,WAAW,EAAE;CAEvE,MAAM,CAAC,OAAO,YAAY,oBAAoB;CAE9C,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,cAAc,oBAAC,0BAAD,EAAiC,MAAQ,CAAA,GACrE,oBAAC,iBAAD;EAAuB;EAAgB;EAAU,KAAK;EAAU,GAAI;EACjE;CACc,CAAA,CACjB,EAAA,CAAA;AAEN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerContainer.js","names":[],"sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n ColorScheme,\n type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { Dismissible } from '../dismissible'\nimport { useBannerContext } from './Banner.context'\n\nconst StyledBannerContainer = styled(\n 'section',\n {\n base: [\n 'flex',\n 'relative',\n 'w-full',\n 'rounded-lg',\n 'overflow-hidden',\n 'text-(--foreground)',\n '[--banner-heading-color:var(--color-foreground)]',\n '[--banner-text-color:var(--color-grey-900)]'\n ],\n variants: {\n emphasis: {\n bold: [\n '[--banner-heading-color:var(--color-foreground-7-plus)]',\n '[--banner-text-color:var(--color-grey-100)]',\n 'bg-(--base-11)',\n 'text-(--foreground-7-plus)'\n ],\n subtle: ['bg-(--base-3)'],\n minimal: ['bg-(--base-1)']\n },\n size: {\n sm: [],\n md: []\n }\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\nexport type BannerContainerProps = React.ComponentProps<\n typeof StyledBannerContainer\n> & {\n colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n colorScheme = {},\n onDismiss,\n dismissed,\n ...rest\n}: BannerContainerProps) => {\n const { emphasis } = useBannerContext()\n\n return (\n <ColorScheme {...colorScheme} asChild>\n <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...rest} />\n </Dismissible>\n </ColorScheme>\n )\n}\n"],"mappings":";;;;;;;AAUA,IAAM,wBAAwB,OAC5B,WACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,QAAQ,CAAC,eAAe;GACxB,SAAS,CAAC,eAAe;EAC3B;EACA,MAAM;GACJ,IAAI,CAAC;GACL,IAAI,CAAC;EACP;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAQA,IAAa,mBAAmB,EAC9B,cAAc,CAAC,GACf,WACA,WACA,GAAG,WACuB;CAC1B,MAAM,EAAE,aAAa,iBAAiB;CAEtC,OACE,oBAAC,aAAD;EAAa,GAAI;EAAa,SAAA;YAC5B,oBAAC,aAAD;GAAa,SAAA;GAAmB;GAAsB;
|
|
1
|
+
{"version":3,"file":"BannerContainer.js","names":[],"sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n ColorScheme,\n type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { Dismissible } from '../dismissible'\nimport { useBannerContext } from './Banner.context'\n\nconst StyledBannerContainer = styled(\n 'section',\n {\n base: [\n 'flex',\n 'relative',\n 'w-full',\n 'rounded-lg',\n 'overflow-hidden',\n 'text-(--foreground)',\n '[--banner-heading-color:var(--color-foreground)]',\n '[--banner-text-color:var(--color-grey-900)]'\n ],\n variants: {\n emphasis: {\n bold: [\n '[--banner-heading-color:var(--color-foreground-7-plus)]',\n '[--banner-text-color:var(--color-grey-100)]',\n 'bg-(--base-11)',\n 'text-(--foreground-7-plus)'\n ],\n subtle: ['bg-(--base-3)'],\n minimal: ['bg-(--base-1)']\n },\n size: {\n sm: [],\n md: []\n }\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\nexport type BannerContainerProps = React.ComponentProps<\n typeof StyledBannerContainer\n> & {\n colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n colorScheme = {},\n onDismiss,\n dismissed,\n ...rest\n}: BannerContainerProps) => {\n const { emphasis } = useBannerContext()\n\n return (\n <ColorScheme {...colorScheme} asChild>\n <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n {/* Explicit role keeps the banner landmark regardless of where the\n banner is nested, which a native <header> would only expose at the\n top level. */}\n {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}\n <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...rest} />\n </Dismissible>\n </ColorScheme>\n )\n}\n"],"mappings":";;;;;;;AAUA,IAAM,wBAAwB,OAC5B,WACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,QAAQ,CAAC,eAAe;GACxB,SAAS,CAAC,eAAe;EAC3B;EACA,MAAM;GACJ,IAAI,CAAC;GACL,IAAI,CAAC;EACP;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAQA,IAAa,mBAAmB,EAC9B,cAAc,CAAC,GACf,WACA,WACA,GAAG,WACuB;CAC1B,MAAM,EAAE,aAAa,iBAAiB;CAEtC,OACE,oBAAC,aAAD;EAAa,GAAI;EAAa,SAAA;YAC5B,oBAAC,aAAD;GAAa,SAAA;GAAmB;GAAsB;aAKpD,oBAAC,uBAAD;IAAuB,MAAK;IAAmB;IAAU,GAAI;GAAO,CAAA;EACzD,CAAA;CACF,CAAA;AAEjB"}
|
|
@@ -3,7 +3,7 @@ import { useBannerContext } from "../Banner.context.js";
|
|
|
3
3
|
import { BannerRegularButton } from "./BannerRegularButton.js";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
import invariant from "invariant";
|
|
6
|
+
import invariant from "tiny-invariant";
|
|
7
7
|
//#region src/components/banner/banner-regular/BannerRegularActions.tsx
|
|
8
8
|
var MAX_ALLOWED_CHILDREN = 2;
|
|
9
9
|
var toGap = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerRegularActions.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"BannerRegularActions.js","names":[],"sources":["../../../../src/components/banner/banner-regular/BannerRegularActions.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\n\nimport { cn } from '../../../styled'\nimport { useBannerContext } from '../Banner.context'\nimport { BannerRegularButton } from './BannerRegularButton'\n\nconst MAX_ALLOWED_CHILDREN = 2\n\nconst toGap = {\n sm: 'gap-2',\n md: 'gap-4'\n}\n\nconst toDirection = {\n sm: 'flex-col',\n md: 'flex-row'\n}\n\nexport const BannerRegularActions = ({\n children,\n className,\n ...rest\n}: React.PropsWithChildren<React.ComponentProps<'div'>>) => {\n const { size } = useBannerContext()\n\n const gap = typeof size === 'string' ? toGap[size] : 'gap-2 md:gap-4'\n\n const direction =\n typeof size === 'string' ? toDirection[size] : 'flex-col md:flex-row'\n\n invariant(\n React.Children.count(children) <= MAX_ALLOWED_CHILDREN,\n `A maximum of ${MAX_ALLOWED_CHILDREN} ${BannerRegularButton.displayName} component(s) are permitted as children of ${BannerRegularActions.displayName}`\n )\n\n return (\n <div className={cn('flex', gap, direction, className)} {...rest}>\n {React.Children.map(children, (child, index) => {\n // if child is undefined or null, React.isValidElement returns false and hence error is thrown.\n // This line will prevent that from happening\n if (child == null) return child\n\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to ${BannerRegularActions.displayName} is not a valid element`\n )\n }\n\n invariant(\n child.type === BannerRegularButton,\n `Children of type ${child?.type} aren't permitted. Only an ${BannerRegularButton.displayName} component is allowed in ${BannerRegularActions.displayName}`\n )\n\n const propsToInject: Partial<\n React.ComponentProps<typeof BannerRegularButton>\n > = {\n // Override button appearance - make the second button outlined\n appearance: index > 0 ? 'outline' : undefined\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof BannerRegularButton>\n >,\n propsToInject\n )\n })}\n </div>\n )\n}\n\nBannerRegularActions.displayName = 'BannerRegularActions'\n"],"mappings":";;;;;;;AAOA,IAAM,uBAAuB;AAE7B,IAAM,QAAQ;CACZ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBAAwB,EACnC,UACA,WACA,GAAG,WACuD;CAC1D,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,MAAM,OAAO,SAAS,WAAW,MAAM,QAAQ;CAErD,MAAM,YACJ,OAAO,SAAS,WAAW,YAAY,QAAQ;CAEjD,UACE,QAAM,SAAS,MAAM,QAAQ,KAAK,sBAClC,gBAAgB,qBAAqB,GAAG,oBAAoB,YAAY,6CAA6C,qBAAqB,aAC5I;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,KAAK,WAAW,SAAS;EAAG,GAAI;YACxD,QAAM,SAAS,IAAI,WAAW,OAAO,UAAU;GAG9C,IAAI,SAAS,MAAM,OAAO;GAE1B,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MACR,mBAAmB,qBAAqB,YAAY,wBACtD;GAGF,UACE,MAAM,SAAS,qBACf,oBAAoB,OAAO,KAAK,6BAA6B,oBAAoB,YAAY,2BAA2B,qBAAqB,aAC/I;GAEA,MAAM,gBAEF,EAEF,YAAY,QAAQ,IAAI,YAAY,KAAA,EACtC;GAEA,OAAO,QAAM,aACX,OAGA,aACF;EACF,CAAC;CACE,CAAA;AAET;AAEA,qBAAqB,cAAc"}
|
|
@@ -26,7 +26,7 @@ var StyledButton = styled(Button, {
|
|
|
26
26
|
});
|
|
27
27
|
var offsetWeekdayNames = (weekdayNames, firstDayOfWeek) => {
|
|
28
28
|
const start = weekdayNames.slice(0, firstDayOfWeek);
|
|
29
|
-
return weekdayNames.slice(firstDayOfWeek)
|
|
29
|
+
return [...weekdayNames.slice(firstDayOfWeek), ...start];
|
|
30
30
|
};
|
|
31
31
|
var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0, monthNames = monthNamesShort, weekdayNames = weekdayNamesShort, labels = DEFAULT_LABELS, date: dateProp, minDate, maxDate, setYear, ...rest }) => {
|
|
32
32
|
const [fallbackDate] = React$1.useState(() => /* @__PURE__ */ new Date());
|
|
@@ -88,7 +88,7 @@ var Calendar = ({ className, refDateSelected, refDateToday, firstDayOfWeek = 0,
|
|
|
88
88
|
onClick: () => handleSetYear(year),
|
|
89
89
|
selected: isCurrentYear,
|
|
90
90
|
children: year
|
|
91
|
-
},
|
|
91
|
+
}, year);
|
|
92
92
|
})
|
|
93
93
|
}),
|
|
94
94
|
!showYears && calendars.map(({ month, year, weeks }) => /* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n base: ['text-grey-1000', 'p-3', 'w-16'],\n variants: {\n selected: {\n false: [\n 'disabled:bg-white!',\n 'font-normal',\n 'hover:bg-grey-200!',\n 'hover:text-grey-1000!',\n 'text-grey-1000!'\n ]\n }\n }\n})\n\nexport type CalendarTranslationProps = {\n monthNames?: string[]\n weekdayNames?: string[]\n labels?: {\n open: string\n next: string\n previous: string\n nextYear: string\n previousYear: string\n }\n}\n\ntype CalendarProps = DayzedInterface &\n CalendarTranslationProps & {\n refDateToday?: React.RefObject<HTMLButtonElement | null>\n refDateSelected?: React.RefObject<HTMLButtonElement | null>\n setYear: (date: Date) => Promise<void>\n className?: string\n }\n\nconst offsetWeekdayNames = (\n weekdayNames: string[],\n firstDayOfWeek: number\n): string[] => {\n const start = weekdayNames.slice(0, firstDayOfWeek)\n const end = weekdayNames.slice(firstDayOfWeek)\n return end.concat(start)\n}\n\nexport const Calendar = ({\n className,\n refDateSelected,\n refDateToday,\n firstDayOfWeek = 0,\n monthNames = monthNamesShort,\n weekdayNames = weekdayNamesShort,\n labels = DEFAULT_LABELS,\n date: dateProp,\n minDate,\n maxDate,\n setYear,\n ...rest\n}: CalendarProps) => {\n // `new Date()` as a default parameter runs on every render (impure render,\n // and a server/client hydration divergence near midnight) — capture the\n // fallback once instead.\n const [fallbackDate] = React.useState(() => new Date())\n const date = dateProp ?? fallbackDate\n\n const [showYears, setShowYears] = React.useState<boolean>(false)\n const [currentYear, setCurrentYear] = React.useState<number>(\n date?.getFullYear()\n )\n\n const handleSetYear = (year: number): void => {\n // Copy before setFullYear — mutating the `date` prop in place changes the\n // caller's object.\n const newDate = new Date(date)\n newDate.setFullYear(year)\n setYear(newDate)\n setShowYears(false)\n }\n\n const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n const yearList = Array.from({ length: 16 }, (_, i) => {\n const year = currentYear - i\n if (\n (maxDate && year > maxDate.getFullYear()) ||\n (minDate && year < minDate.getFullYear())\n )\n return 0\n return year\n })\n\n const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n firstDayOfWeek,\n showOutsideDays: true,\n date,\n minDate,\n maxDate,\n ...rest\n })\n\n if (!calendars.length) return null\n\n return (\n <div className={cn('relative', 'w-fit', '-mt-1', className)}>\n <div className=\"absolute top-0 -right-1 flex\">\n <ActionIcon\n label={labels[showYears ? 'previousYear' : 'previous']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getBackProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear - 16)\n })}\n disabled={showYears && isAtMinYear}\n >\n <Icon is={ChevronLeft} />\n </ActionIcon>\n <ActionIcon\n label={labels[showYears ? 'nextYear' : 'next']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getForwardProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear + 16)\n })}\n disabled={showYears && isAtMaxYear}\n >\n <Icon is={ChevronRight} />\n </ActionIcon>\n </div>\n {showYears && (\n <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n {yearList.map((year, i) => {\n const isCurrentYear = year === date.getFullYear()\n if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n return (\n <StyledButton\n key={`${year}${i}`}\n theme={isCurrentYear ? 'primary' : 'neutral'}\n onClick={() => handleSetYear(year)}\n selected={isCurrentYear}\n >\n {year}\n </StyledButton>\n )\n })}\n </div>\n )}\n {!showYears &&\n calendars.map(({ month, year, weeks }) => (\n <div key={`${month}${year}`}>\n <div className=\"mb-4 flex h-10 items-center\">\n <Button\n theme=\"neutral\"\n onClick={() => setShowYears(true)}\n className=\"text-grey-1000 px-0\"\n >\n {monthNames[month]} {year}\n </Button>\n </div>\n <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n (weekday) => (\n <Text\n as=\"span\"\n size=\"sm\"\n weight=\"bold\"\n key={`${month}${year}${weekday}`}\n className=\"text-center\"\n >\n {weekday}\n </Text>\n )\n )}\n </div>\n <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n {weeks.map((week, weekIndex) =>\n week.map((dateObj, index) => {\n const key = `${month}${year}${weekIndex}${index}`\n\n if (!dateObj) return <div key={key} />\n\n const { date, selected, today, prevMonth, nextMonth } =\n dateObj\n\n return (\n <Day\n isOutsideMonth={prevMonth || nextMonth}\n isSelected={selected}\n isToday={today}\n key={key}\n ref={\n selected ? refDateSelected : today ? refDateToday : null\n }\n {...getDateProps({ dateObj })}\n type=\"button\"\n >\n {date.getDate()}\n </Day>\n )\n })\n )}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Calendar.js","names":[],"sources":["../../../src/components/calendar/Calendar.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport { useDayzed } from 'dayzed'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { DEFAULT_LABELS, monthNamesShort, weekdayNamesShort } from './constants'\nimport { Day } from './Day'\n\nconst StyledButton = styled(Button, {\n base: ['text-grey-1000', 'p-3', 'w-16'],\n variants: {\n selected: {\n false: [\n 'disabled:bg-white!',\n 'font-normal',\n 'hover:bg-grey-200!',\n 'hover:text-grey-1000!',\n 'text-grey-1000!'\n ]\n }\n }\n})\n\nexport type CalendarTranslationProps = {\n monthNames?: string[]\n weekdayNames?: string[]\n labels?: {\n open: string\n next: string\n previous: string\n nextYear: string\n previousYear: string\n }\n}\n\ntype CalendarProps = DayzedInterface &\n CalendarTranslationProps & {\n refDateToday?: React.RefObject<HTMLButtonElement | null>\n refDateSelected?: React.RefObject<HTMLButtonElement | null>\n setYear: (date: Date) => Promise<void>\n className?: string\n }\n\nconst offsetWeekdayNames = (\n weekdayNames: string[],\n firstDayOfWeek: number\n): string[] => {\n const start = weekdayNames.slice(0, firstDayOfWeek)\n const end = weekdayNames.slice(firstDayOfWeek)\n return [...end, ...start]\n}\n\nexport const Calendar = ({\n className,\n refDateSelected,\n refDateToday,\n firstDayOfWeek = 0,\n monthNames = monthNamesShort,\n weekdayNames = weekdayNamesShort,\n labels = DEFAULT_LABELS,\n date: dateProp,\n minDate,\n maxDate,\n setYear,\n ...rest\n}: CalendarProps) => {\n // `new Date()` as a default parameter runs on every render (impure render,\n // and a server/client hydration divergence near midnight) — capture the\n // fallback once instead.\n const [fallbackDate] = React.useState(() => new Date())\n const date = dateProp ?? fallbackDate\n\n const [showYears, setShowYears] = React.useState<boolean>(false)\n const [currentYear, setCurrentYear] = React.useState<number>(\n date?.getFullYear()\n )\n\n const handleSetYear = (year: number): void => {\n // Copy before setFullYear — mutating the `date` prop in place changes the\n // caller's object.\n const newDate = new Date(date)\n newDate.setFullYear(year)\n setYear(newDate)\n setShowYears(false)\n }\n\n const isAtMinYear = minDate && currentYear - 16 <= minDate.getFullYear()\n const isAtMaxYear = maxDate && currentYear >= maxDate.getFullYear()\n\n const yearList = Array.from({ length: 16 }, (_, i) => {\n const year = currentYear - i\n if (\n (maxDate && year > maxDate.getFullYear()) ||\n (minDate && year < minDate.getFullYear())\n )\n return 0\n return year\n })\n\n const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n firstDayOfWeek,\n showOutsideDays: true,\n date,\n minDate,\n maxDate,\n ...rest\n })\n\n if (!calendars.length) return null\n\n return (\n <div className={cn('relative', 'w-fit', '-mt-1', className)}>\n <div className=\"absolute top-0 -right-1 flex\">\n <ActionIcon\n label={labels[showYears ? 'previousYear' : 'previous']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getBackProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear - 16)\n })}\n disabled={showYears && isAtMinYear}\n >\n <Icon is={ChevronLeft} />\n </ActionIcon>\n <ActionIcon\n label={labels[showYears ? 'nextYear' : 'next']}\n theme=\"neutral\"\n size=\"md\"\n {...(!showYears && getForwardProps({ calendars }))}\n {...(showYears && {\n onClick: () => setCurrentYear(currentYear + 16)\n })}\n disabled={showYears && isAtMaxYear}\n >\n <Icon is={ChevronRight} />\n </ActionIcon>\n </div>\n {showYears && (\n <div className=\"grid grid-cols-4 gap-x-1 gap-y-3 pt-12 [direction:rtl]\">\n {yearList.map((year, i) => {\n const isCurrentYear = year === date.getFullYear()\n // Out-of-range slots render as empty placeholders in a fixed 16-cell\n // grid; several share the same `0` value, so the slot index is their\n // only stable identity.\n // eslint-disable-next-line react/no-array-index-key\n if (!year) return <div key={i} className=\"h-10 w-16\" />\n\n return (\n <StyledButton\n key={year}\n theme={isCurrentYear ? 'primary' : 'neutral'}\n onClick={() => handleSetYear(year)}\n selected={isCurrentYear}\n >\n {year}\n </StyledButton>\n )\n })}\n </div>\n )}\n {!showYears &&\n calendars.map(({ month, year, weeks }) => (\n <div key={`${month}${year}`}>\n <div className=\"mb-4 flex h-10 items-center\">\n <Button\n theme=\"neutral\"\n onClick={() => setShowYears(true)}\n className=\"text-grey-1000 px-0\"\n >\n {monthNames[month]} {year}\n </Button>\n </div>\n <div className=\"mb-3 grid grid-cols-7 gap-x-2 gap-y-1\">\n {offsetWeekdayNames(weekdayNames, firstDayOfWeek).map(\n (weekday) => (\n <Text\n as=\"span\"\n size=\"sm\"\n weight=\"bold\"\n key={`${month}${year}${weekday}`}\n className=\"text-center\"\n >\n {weekday}\n </Text>\n )\n )}\n </div>\n <div className=\"grid grid-cols-7 gap-x-2 gap-y-1\">\n {weeks.map((week, weekIndex) =>\n week.map((dateObj, index) => {\n const key = `${month}${year}${weekIndex}${index}`\n\n if (!dateObj) return <div key={key} />\n\n const { date, selected, today, prevMonth, nextMonth } =\n dateObj\n\n return (\n <Day\n isOutsideMonth={prevMonth || nextMonth}\n isSelected={selected}\n isToday={today}\n key={key}\n ref={\n selected ? refDateSelected : today ? refDateToday : null\n }\n {...getDateProps({ dateObj })}\n type=\"button\"\n >\n {date.getDate()}\n </Day>\n )\n })\n )}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\nCalendar.displayName = 'Calendar'\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import useEmblaCarousel from 'embla-carousel-react'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport {
|
|
1
|
+
{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import useEmblaCarousel from 'embla-carousel-react'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype EmblaApi = ReturnType<typeof useEmblaCarousel>[1]\n\ntype CarouselContextValue = {\n emblaRef: React.RefCallback<HTMLDivElement>\n emblaApi: EmblaApi\n selectedIndex: number\n scrollSnaps: number[]\n canScrollPrev: boolean\n canScrollNext: boolean\n scrollPrev: () => void\n scrollNext: () => void\n scrollTo: (index: number) => void\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null)\n\ntype CarouselProps = {\n currentSlide?: number\n}\n\nexport const CarouselComponent = ({\n children,\n currentSlide = 0,\n className,\n ...rest\n}: React.PropsWithChildren<\n CarouselProps & React.HTMLAttributes<HTMLDivElement>\n>) => {\n const [emblaRef, emblaApi] = useEmblaCarousel({\n startIndex: currentSlide,\n align: 'center'\n })\n\n const [selectedIndex, setSelectedIndex] = React.useState(currentSlide)\n const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const scrollPrev = React.useCallback(() => {\n emblaApi?.scrollPrev()\n }, [emblaApi])\n\n const scrollNext = React.useCallback(() => {\n emblaApi?.scrollNext()\n }, [emblaApi])\n\n const scrollTo = React.useCallback(\n (index: number) => {\n emblaApi?.scrollTo(index)\n },\n [emblaApi]\n )\n\n const onSelect = React.useCallback(() => {\n if (!emblaApi) return\n setSelectedIndex(emblaApi.selectedScrollSnap())\n setCanScrollPrev(emblaApi.canScrollPrev())\n setCanScrollNext(emblaApi.canScrollNext())\n }, [emblaApi])\n\n const onInit = React.useCallback(() => {\n if (!emblaApi) return\n setScrollSnaps(emblaApi.scrollSnapList())\n }, [emblaApi])\n\n React.useEffect(() => {\n if (!emblaApi) return\n\n onInit()\n onSelect()\n\n emblaApi.on('reInit', onInit)\n emblaApi.on('reInit', onSelect)\n emblaApi.on('select', onSelect)\n\n return () => {\n emblaApi.off('reInit', onInit)\n emblaApi.off('reInit', onSelect)\n emblaApi.off('select', onSelect)\n }\n }, [emblaApi, onInit, onSelect])\n\n const contextValue = React.useMemo<CarouselContextValue>(\n () => ({\n emblaRef,\n emblaApi,\n selectedIndex,\n scrollSnaps,\n canScrollPrev,\n canScrollNext,\n scrollPrev,\n scrollNext,\n scrollTo\n }),\n [\n emblaRef,\n emblaApi,\n selectedIndex,\n scrollSnaps,\n canScrollPrev,\n canScrollNext,\n scrollPrev,\n scrollNext,\n scrollTo\n ]\n )\n\n return (\n <div className={cn('relative', 'w-full', className)} {...rest}>\n <CarouselContext value={contextValue}>{children}</CarouselContext>\n </div>\n )\n}\n\nexport const useCarousel = () => {\n const context = React.use(CarouselContext)\n if (!context) {\n throw new Error('useCarousel must be used within a Carousel')\n }\n\n return {\n ...context,\n // Alias for backward compatibility\n currentSlide: context.selectedIndex\n }\n}\n\nexport const Carousel = /* @__PURE__ */ Object.assign(CarouselComponent, {\n ArrowNext: CarouselArrowNext,\n ArrowPrevious: CarouselArrowPrevious,\n Pagination: CarouselPagination,\n Slide: CarouselSlide,\n Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"mappings":";;;;;;;;;AAuBA,IAAM,kBAAkB,QAAM,cAA2C,IAAI;AAM7E,IAAa,qBAAqB,EAChC,UACA,eAAe,GACf,WACA,GAAG,WAGC;CACJ,MAAM,CAAC,UAAU,YAAY,iBAAiB;EAC5C,YAAY;EACZ,OAAO;CACT,CAAC;CAED,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CACrE,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,CAAC,CAAC;CACjE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAC9D,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,aAAa,QAAM,kBAAkB;EACzC,UAAU,WAAW;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,QAAM,kBAAkB;EACzC,UAAU,WAAW;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,QAAM,aACpB,UAAkB;EACjB,UAAU,SAAS,KAAK;CAC1B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,WAAW,QAAM,kBAAkB;EACvC,IAAI,CAAC,UAAU;EACf,iBAAiB,SAAS,mBAAmB,CAAC;EAC9C,iBAAiB,SAAS,cAAc,CAAC;EACzC,iBAAiB,SAAS,cAAc,CAAC;CAC3C,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,SAAS,QAAM,kBAAkB;EACrC,IAAI,CAAC,UAAU;EACf,eAAe,SAAS,eAAe,CAAC;CAC1C,GAAG,CAAC,QAAQ,CAAC;CAEb,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,OAAO;EACP,SAAS;EAET,SAAS,GAAG,UAAU,MAAM;EAC5B,SAAS,GAAG,UAAU,QAAQ;EAC9B,SAAS,GAAG,UAAU,QAAQ;EAE9B,aAAa;GACX,SAAS,IAAI,UAAU,MAAM;GAC7B,SAAS,IAAI,UAAU,QAAQ;GAC/B,SAAS,IAAI,UAAU,QAAQ;EACjC;CACF,GAAG;EAAC;EAAU;EAAQ;CAAQ,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,SAAS;EAAG,GAAI;YACvD,oBAAC,iBAAD;GAAiB,OAAO;GAAe;EAA0B,CAAA;CAC9D,CAAA;AAET;AAEA,IAAa,oBAAoB;CAC/B,MAAM,UAAU,QAAM,IAAI,eAAe;CACzC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,4CAA4C;CAG9D,OAAO;EACL,GAAG;EAEH,cAAc,QAAQ;CACxB;AACF;AAEA,IAAa,WAA2B,uBAAO,OAAO,mBAAmB;CACvE,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;AACV,CAAC;AAED,kBAAkB,cAAc"}
|
|
@@ -17,8 +17,9 @@ var CheckboxGroupAllItem = ({ onCheckedChange, title = "all", ...rest }) => {
|
|
|
17
17
|
onCheckedChange: handleItemCheckedChange,
|
|
18
18
|
checked: (() => {
|
|
19
19
|
if (!checkedItems.length || !mountedItems.length) return false;
|
|
20
|
-
|
|
21
|
-
if (mountedItems.
|
|
20
|
+
const checkedSet = new Set(checkedItems);
|
|
21
|
+
if (mountedItems.every((mountedItem) => checkedSet.has(mountedItem))) return true;
|
|
22
|
+
if (mountedItems.some((mountedItem) => checkedSet.has(mountedItem))) return "indeterminate";
|
|
22
23
|
return false;
|
|
23
24
|
})(),
|
|
24
25
|
title,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroupAllItem.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupAllItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { CheckboxGroupCheckedContext } from './CheckboxGroupChecked.context'\nimport { CheckboxGroupMountedContext } from './CheckboxGroupMounted.context'\n\ntype CheckboxGroupAllItemProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n 'checked' | 'defaultChecked'\n>\n\nexport const CheckboxGroupAllItem = ({\n onCheckedChange,\n title = 'all',\n ...rest\n}: CheckboxGroupAllItemProps) => {\n const {\n checked: checkedItems,\n handleItemCheckedChange: handleItemCheckedChangeContext\n } = React.use(CheckboxGroupCheckedContext)\n const { mounted: mountedItems } = React.use(CheckboxGroupMountedContext)\n\n const handleItemCheckedChange = (newChecked) => {\n mountedItems.forEach((value) => {\n handleItemCheckedChangeContext(newChecked, value)\n })\n onCheckedChange?.(newChecked)\n }\n\n const isAllChecked = (() => {\n if (!checkedItems.length || !mountedItems.length) return false\n\n if (mountedItems.every((mountedItem) =>
|
|
1
|
+
{"version":3,"file":"CheckboxGroupAllItem.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupAllItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { CheckboxGroupCheckedContext } from './CheckboxGroupChecked.context'\nimport { CheckboxGroupMountedContext } from './CheckboxGroupMounted.context'\n\ntype CheckboxGroupAllItemProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n 'checked' | 'defaultChecked'\n>\n\nexport const CheckboxGroupAllItem = ({\n onCheckedChange,\n title = 'all',\n ...rest\n}: CheckboxGroupAllItemProps) => {\n const {\n checked: checkedItems,\n handleItemCheckedChange: handleItemCheckedChangeContext\n } = React.use(CheckboxGroupCheckedContext)\n const { mounted: mountedItems } = React.use(CheckboxGroupMountedContext)\n\n const handleItemCheckedChange = (newChecked) => {\n mountedItems.forEach((value) => {\n handleItemCheckedChangeContext(newChecked, value)\n })\n onCheckedChange?.(newChecked)\n }\n\n const isAllChecked = (() => {\n if (!checkedItems.length || !mountedItems.length) return false\n\n // Set lookup keeps the every/some scans O(mounted) instead of O(mounted × checked).\n const checkedSet = new Set(checkedItems)\n\n if (mountedItems.every((mountedItem) => checkedSet.has(mountedItem)))\n return true\n\n if (mountedItems.some((mountedItem) => checkedSet.has(mountedItem)))\n return 'indeterminate'\n\n return false\n })()\n\n return (\n <Checkbox\n onCheckedChange={handleItemCheckedChange}\n checked={isAllChecked}\n title={title}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;AAWA,IAAa,wBAAwB,EACnC,iBACA,QAAQ,OACR,GAAG,WAC4B;CAC/B,MAAM,EACJ,SAAS,cACT,yBAAyB,mCACvB,QAAM,IAAI,2BAA2B;CACzC,MAAM,EAAE,SAAS,iBAAiB,QAAM,IAAI,2BAA2B;CAEvE,MAAM,2BAA2B,eAAe;EAC9C,aAAa,SAAS,UAAU;GAC9B,+BAA+B,YAAY,KAAK;EAClD,CAAC;EACD,kBAAkB,UAAU;CAC9B;CAiBA,OACE,oBAAC,UAAD;EACE,iBAAiB;EACjB,gBAlBwB;GAC1B,IAAI,CAAC,aAAa,UAAU,CAAC,aAAa,QAAQ,OAAO;GAGzD,MAAM,aAAa,IAAI,IAAI,YAAY;GAEvC,IAAI,aAAa,OAAO,gBAAgB,WAAW,IAAI,WAAW,CAAC,GACjE,OAAO;GAET,IAAI,aAAa,MAAM,gBAAgB,WAAW,IAAI,WAAW,CAAC,GAChE,OAAO;GAET,OAAO;EACT,EAAA,CAKa;EACF;EACP,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -10,7 +10,7 @@ var generateNewCheckedFn = (currentChecked) => {
|
|
|
10
10
|
const newCheckedSet = new Set(currentChecked);
|
|
11
11
|
if (newItemChecked) newCheckedSet.add(itemValue);
|
|
12
12
|
else newCheckedSet.delete(itemValue);
|
|
13
|
-
return
|
|
13
|
+
return [...newCheckedSet];
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
16
|
var CheckboxGroupCheckedProvider = ({ checked: controlledChecked, defaultChecked = [], onCheckedChange, ...rest }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroupChecked.context.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupChecked.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\n\ntype CheckboxGroupCheckedContextValue = {\n checked: CheckboxGroupItemValue[]\n handleItemCheckedChange: (\n newItemChecked: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\ntype CheckboxGroupCheckedContextProps = {\n checked?: CheckboxGroupCheckedContextValue['checked']\n defaultChecked?: CheckboxGroupCheckedContextValue['checked']\n onCheckedChange?: (\n checked: CheckboxGroupCheckedContextValue['checked']\n ) => void\n}\n\nexport const CheckboxGroupCheckedContext =\n React.createContext<CheckboxGroupCheckedContextValue>({\n checked: [],\n handleItemCheckedChange: () => null\n })\n\nconst generateNewCheckedFn = (\n currentChecked: CheckboxGroupCheckedContextValue['checked']\n) => {\n return (newItemChecked, itemValue) => {\n const newCheckedSet = new Set(currentChecked)\n if (newItemChecked) {\n newCheckedSet.add(itemValue)\n } else {\n newCheckedSet.delete(itemValue)\n }\n const newChecked =
|
|
1
|
+
{"version":3,"file":"CheckboxGroupChecked.context.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupChecked.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\n\ntype CheckboxGroupCheckedContextValue = {\n checked: CheckboxGroupItemValue[]\n handleItemCheckedChange: (\n newItemChecked: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\ntype CheckboxGroupCheckedContextProps = {\n checked?: CheckboxGroupCheckedContextValue['checked']\n defaultChecked?: CheckboxGroupCheckedContextValue['checked']\n onCheckedChange?: (\n checked: CheckboxGroupCheckedContextValue['checked']\n ) => void\n}\n\nexport const CheckboxGroupCheckedContext =\n React.createContext<CheckboxGroupCheckedContextValue>({\n checked: [],\n handleItemCheckedChange: () => null\n })\n\nconst generateNewCheckedFn = (\n currentChecked: CheckboxGroupCheckedContextValue['checked']\n) => {\n return (newItemChecked, itemValue) => {\n const newCheckedSet = new Set(currentChecked)\n if (newItemChecked) {\n newCheckedSet.add(itemValue)\n } else {\n newCheckedSet.delete(itemValue)\n }\n const newChecked = [...newCheckedSet]\n return newChecked\n }\n}\n\nexport const CheckboxGroupCheckedProvider = ({\n checked: controlledChecked,\n defaultChecked = [],\n onCheckedChange,\n ...rest\n}: React.PropsWithChildren<CheckboxGroupCheckedContextProps>) => {\n const [checked, setChecked] = React.useState(defaultChecked)\n\n const handleItemControlledCheckedChange = React.useCallback(\n (newItemChecked, itemValue) => {\n if (!controlledChecked) return () => null\n const newCheckedFn = generateNewCheckedFn(controlledChecked)\n const newChecked = newCheckedFn(newItemChecked, itemValue)\n onCheckedChange?.(newChecked)\n },\n [onCheckedChange, controlledChecked]\n )\n\n const handleItemCheckedChange = React.useCallback(\n (newItemChecked, itemValue) => {\n setChecked((prevChecked) => {\n const newCheckedFn = generateNewCheckedFn(prevChecked)\n const newChecked = newCheckedFn(newItemChecked, itemValue)\n onCheckedChange?.(newChecked)\n return newChecked\n })\n },\n [onCheckedChange]\n )\n\n const value = React.useMemo<CheckboxGroupCheckedContextValue>(() => {\n const isControlled = Array.isArray(controlledChecked)\n return {\n checked: isControlled\n ? (controlledChecked as CheckboxGroupCheckedContextValue['checked']) // We're literally JUST checking it above but TS still flags it, wrongly, so casting\n : checked,\n handleItemCheckedChange: isControlled\n ? handleItemControlledCheckedChange\n : handleItemCheckedChange\n }\n }, [\n checked,\n handleItemCheckedChange,\n handleItemControlledCheckedChange,\n controlledChecked\n ])\n\n return <CheckboxGroupCheckedContext value={value} {...rest} />\n}\n"],"mappings":";;;AAoBA,IAAa,8BACX,QAAM,cAAgD;CACpD,SAAS,CAAC;CACV,+BAA+B;AACjC,CAAC;AAEH,IAAM,wBACJ,mBACG;CACH,QAAQ,gBAAgB,cAAc;EACpC,MAAM,gBAAgB,IAAI,IAAI,cAAc;EAC5C,IAAI,gBACF,cAAc,IAAI,SAAS;OAE3B,cAAc,OAAO,SAAS;EAGhC,OAAO,CADa,GAAG,aAChB;CACT;AACF;AAEA,IAAa,gCAAgC,EAC3C,SAAS,mBACT,iBAAiB,CAAC,GAClB,iBACA,GAAG,WAC4D;CAC/D,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,cAAc;CAE3D,MAAM,oCAAoC,QAAM,aAC7C,gBAAgB,cAAc;EAC7B,IAAI,CAAC,mBAAmB,aAAa;EAErC,MAAM,aADe,qBAAqB,iBACvB,CAAA,CAAa,gBAAgB,SAAS;EACzD,kBAAkB,UAAU;CAC9B,GACA,CAAC,iBAAiB,iBAAiB,CACrC;CAEA,MAAM,0BAA0B,QAAM,aACnC,gBAAgB,cAAc;EAC7B,YAAY,gBAAgB;GAE1B,MAAM,aADe,qBAAqB,WACvB,CAAA,CAAa,gBAAgB,SAAS;GACzD,kBAAkB,UAAU;GAC5B,OAAO;EACT,CAAC;CACH,GACA,CAAC,eAAe,CAClB;CAmBA,OAAO,oBAAC,6BAAD;EAAoC,OAjB7B,QAAM,cAAgD;GAClE,MAAM,eAAe,MAAM,QAAQ,iBAAiB;GACpD,OAAO;IACL,SAAS,eACJ,oBACD;IACJ,yBAAyB,eACrB,oCACA;GACN;EACF,GAAG;GACD;GACA;GACA;GACA;EACF,CAE2C;EAAO,GAAI;CAAO,CAAA;AAC/D"}
|
|
@@ -14,7 +14,7 @@ var CheckboxGroupMountedProvider = (props) => {
|
|
|
14
14
|
const newMountedSet = new Set(prevMounted);
|
|
15
15
|
if (newItemMounted) newMountedSet.add(itemValue);
|
|
16
16
|
else newMountedSet.delete(itemValue);
|
|
17
|
-
return
|
|
17
|
+
return [...newMountedSet];
|
|
18
18
|
});
|
|
19
19
|
}, [handleItemMountedChangeFurtherUpContext]);
|
|
20
20
|
return /* @__PURE__ */ jsx(CheckboxGroupMountedContext, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroupMounted.context.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupMounted.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\n\ntype CheckboxGroupMountedContextValue = {\n mounted: CheckboxGroupItemValue[]\n handleItemMountedChange: (\n newItemMounted: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\nexport const CheckboxGroupMountedContext =\n React.createContext<CheckboxGroupMountedContextValue>({\n mounted: [],\n handleItemMountedChange: () => null\n })\n\nexport const CheckboxGroupMountedProvider = (props) => {\n const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } =\n React.use(CheckboxGroupMountedContext)\n\n const [mounted, setMounted] = React.useState<CheckboxGroupItemValue[]>([])\n const handleItemMountedChange = React.useCallback(\n (newItemMounted, itemValue) => {\n handleItemMountedChangeFurtherUpContext?.(newItemMounted, itemValue)\n setMounted((prevMounted) => {\n const newMountedSet = new Set(prevMounted)\n if (newItemMounted) {\n newMountedSet.add(itemValue)\n } else {\n newMountedSet.delete(itemValue)\n }\n const newMounted =
|
|
1
|
+
{"version":3,"file":"CheckboxGroupMounted.context.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroupMounted.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\n\ntype CheckboxGroupMountedContextValue = {\n mounted: CheckboxGroupItemValue[]\n handleItemMountedChange: (\n newItemMounted: boolean,\n itemValue: CheckboxGroupItemValue\n ) => void\n}\n\nexport const CheckboxGroupMountedContext =\n React.createContext<CheckboxGroupMountedContextValue>({\n mounted: [],\n handleItemMountedChange: () => null\n })\n\nexport const CheckboxGroupMountedProvider = (props) => {\n const { handleItemMountedChange: handleItemMountedChangeFurtherUpContext } =\n React.use(CheckboxGroupMountedContext)\n\n const [mounted, setMounted] = React.useState<CheckboxGroupItemValue[]>([])\n const handleItemMountedChange = React.useCallback(\n (newItemMounted, itemValue) => {\n handleItemMountedChangeFurtherUpContext?.(newItemMounted, itemValue)\n setMounted((prevMounted) => {\n const newMountedSet = new Set(prevMounted)\n if (newItemMounted) {\n newMountedSet.add(itemValue)\n } else {\n newMountedSet.delete(itemValue)\n }\n const newMounted = [...newMountedSet]\n return newMounted\n })\n },\n [handleItemMountedChangeFurtherUpContext]\n )\n\n const value = React.useMemo<CheckboxGroupMountedContextValue>(\n () => ({ mounted, handleItemMountedChange }),\n [mounted, handleItemMountedChange]\n )\n\n return <CheckboxGroupMountedContext value={value} {...props} />\n}\n"],"mappings":";;;AAYA,IAAa,8BACX,QAAM,cAAgD;CACpD,SAAS,CAAC;CACV,+BAA+B;AACjC,CAAC;AAEH,IAAa,gCAAgC,UAAU;CACrD,MAAM,EAAE,yBAAyB,4CAC/B,QAAM,IAAI,2BAA2B;CAEvC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAmC,CAAC,CAAC;CACzE,MAAM,0BAA0B,QAAM,aACnC,gBAAgB,cAAc;EAC7B,0CAA0C,gBAAgB,SAAS;EACnE,YAAY,gBAAgB;GAC1B,MAAM,gBAAgB,IAAI,IAAI,WAAW;GACzC,IAAI,gBACF,cAAc,IAAI,SAAS;QAE3B,cAAc,OAAO,SAAS;GAGhC,OAAO,CADa,GAAG,aAChB;EACT,CAAC;CACH,GACA,CAAC,uCAAuC,CAC1C;CAOA,OAAO,oBAAC,6BAAD;EAAoC,OAL7B,QAAM,eACX;GAAE;GAAS;EAAwB,IAC1C,CAAC,SAAS,uBAAuB,CAGQ;EAAO,GAAI;CAAQ,CAAA;AAChE"}
|
|
@@ -32,14 +32,14 @@ var ChipContent = ({ children, ...rest }) => {
|
|
|
32
32
|
const isSingleChild = childrenArray.length <= 1;
|
|
33
33
|
return /* @__PURE__ */ jsx(StyledChipContent, {
|
|
34
34
|
...rest,
|
|
35
|
-
children: childrenArray.map((child
|
|
35
|
+
children: childrenArray.map((child) => {
|
|
36
36
|
if (!isSingleChild && typeof child === "string") return /* @__PURE__ */ jsx("span", {
|
|
37
37
|
className: "overflow-hidden text-ellipsis whitespace-nowrap",
|
|
38
38
|
children: child
|
|
39
39
|
}, child);
|
|
40
40
|
if (React$1.isValidElement(child) && child.type === Icon) {
|
|
41
41
|
const iconProps = child.props;
|
|
42
|
-
return /* @__PURE__ */ jsx(ChipIcon, { ...iconProps },
|
|
42
|
+
return /* @__PURE__ */ jsx(ChipIcon, { ...iconProps }, child.key);
|
|
43
43
|
}
|
|
44
44
|
return child;
|
|
45
45
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledChipContent = styled('span', {\n base: [\n 'inline-flex',\n 'items-center',\n 'px-1',\n 'grow',\n 'overflow-hidden',\n 'text-ellipsis',\n 'whitespace-nowrap',\n '*:not-last:mr-1'\n ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.use(ChipRootContext)\n const { size } = rootContext\n const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child
|
|
1
|
+
{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledChipContent = styled('span', {\n base: [\n 'inline-flex',\n 'items-center',\n 'px-1',\n 'grow',\n 'overflow-hidden',\n 'text-ellipsis',\n 'whitespace-nowrap',\n '*:not-last:mr-1'\n ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.use(ChipRootContext)\n const { size } = rootContext\n const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child) => {\n if (!isSingleChild && typeof child === 'string')\n return (\n <span\n key={child}\n className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n >\n {child}\n </span>\n )\n if (React.isValidElement(child) && child.type === Icon) {\n const iconProps = child.props as React.ComponentProps<typeof Icon>\n // `React.Children.toArray` already assigns each child a stable key.\n return <ChipIcon key={child.key} {...iconProps} />\n }\n return child\n }) as React.ReactElement<unknown>[]\n }\n </StyledChipContent>\n )\n}\n\nexport const StyledRoot = styled('div', {\n base: [\n 'flex',\n 'px-2',\n 'border',\n 'rounded-md',\n 'items-center',\n 'font-body',\n 'max-w-full',\n 'border-primary-800',\n 'text-primary-900',\n 'bg-primary-100',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n },\n appearance: {\n standard: [],\n modern: ['border-grey-900', 'text-grey-900', 'bg-grey-100']\n }\n }\n})\n\nexport type ChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type ChipRootProviderProps = ChipRootContext\n\nexport const ChipRootContext = React.createContext<ChipRootContext>({})\n\nexport const ChipRootProvider = ({ size, children }: ChipRootProviderProps) => {\n const value = React.useMemo<ChipRootContext>(() => ({ size }), [size])\n return <ChipRootContext value={value}>{children}</ChipRootContext>\n}\n\nexport type ChipRootProps = ChipRootProviderProps\n\nconst ChipRoot = ({ ref, size = 'md', ...rest }: ChipRootProps) => (\n <ChipRootProvider size={size}>\n <StyledRoot ref={ref} size={size} {...rest} />\n </ChipRootProvider>\n)\n\nexport const Chip = /* @__PURE__ */ Object.assign(ChipRoot, {\n Content: ChipContent,\n Icon: ChipIcon\n})\n"],"mappings":";;;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK;AAElD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,IAAI,eACb;CACjB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CACtE,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM;CAAW,CAAA;AAC3C;AAEA,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAC9C,OACE,oBAAC,mBAAD;EAAmB,GAAI;YAEnB,cAAc,KAAK,UAAU;GAC3B,IAAI,CAAC,iBAAiB,OAAO,UAAU,UACrC,OACE,oBAAC,QAAD;IAEE,WAAU;cAET;GACG,GAJC,KAID;GAEV,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;IACtD,MAAM,YAAY,MAAM;IAExB,OAAO,oBAAC,UAAD,EAA0B,GAAI,UAAY,GAA3B,MAAM,GAAqB;GACnD;GACA,OAAO;EACT,CAAC;CAEc,CAAA;AAEvB;AAEA,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAQ;IAAW;IAAkB;GAAkB;EAC9D;EACA,YAAY;GACV,UAAU,CAAC;GACX,QAAQ;IAAC;IAAmB;IAAiB;GAAa;EAC5D;CACF;AACF,CAAC;AAKD,IAAa,kBAAkB,QAAM,cAA+B,CAAC,CAAC;AAEtE,IAAa,oBAAoB,EAAE,MAAM,eAAsC;CAE7E,OAAO,oBAAC,iBAAD;EAAwB,OADjB,QAAM,eAAgC,EAAE,KAAK,IAAI,CAAC,IAAI,CACrC;EAAQ;CAA0B,CAAA;AACnE;AAIA,IAAM,YAAY,EAAE,KAAK,OAAO,MAAM,GAAG,WACvC,oBAAC,kBAAD;CAAwB;WACtB,oBAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;CAAO,CAAA;AAC7B,CAAA;AAGpB,IAAa,OAAuB,uBAAO,OAAO,UAAU;CAC1D,SAAS;CACT,MAAM;AACR,CAAC"}
|
|
@@ -2,10 +2,14 @@ import { InlineMessage } from "../inline-message/InlineMessage.js";
|
|
|
2
2
|
import { PasswordField } from "../password-field/PasswordField.js";
|
|
3
3
|
import * as React$1 from "react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import invariant from "invariant";
|
|
5
|
+
import invariant from "tiny-invariant";
|
|
6
6
|
import { throttle } from "throttle-debounce";
|
|
7
7
|
import { useFormContext } from "react-hook-form";
|
|
8
8
|
//#region src/components/create-password-field/CreatePasswordField.tsx
|
|
9
|
+
var getMessageTheme = (result, isFocused) => {
|
|
10
|
+
if (result) return "success";
|
|
11
|
+
return isFocused ? "neutral" : "error";
|
|
12
|
+
};
|
|
9
13
|
var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "row", label = "Create a password", name = "password", className, validation, appearance, ...rest }) => {
|
|
10
14
|
const { formState, control } = useFormContext();
|
|
11
15
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
@@ -22,10 +26,6 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
|
|
|
22
26
|
return false;
|
|
23
27
|
}, [setValidationResult]);
|
|
24
28
|
const handleChange = React$1.useMemo(() => throttle(500, validatePassword), [validatePassword]);
|
|
25
|
-
const getMessageTheme = (result, isFocused) => {
|
|
26
|
-
if (result) return "success";
|
|
27
|
-
return isFocused ? "neutral" : "error";
|
|
28
|
-
};
|
|
29
29
|
const showValidation = control.mode.isOnBlur && (isFocused || touched) || control.mode.isOnSubmit && (isFocused || formState.isSubmitted && error);
|
|
30
30
|
return /* @__PURE__ */ jsxs("div", {
|
|
31
31
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\nimport invariant from 'tiny-invariant'\n\nimport type { Override } from '../../utilities/types'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\nconst getMessageTheme = (result: boolean, isFocused: boolean) => {\n if (result) return 'success'\n\n return isFocused ? 'neutral' : 'error'\n}\n\ntype CreatePasswordFieldProps = Override<\n React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n {\n label?: string\n name?: string\n validate: (\n password: string\n ) => Promise<ValidationResult | undefined> | ValidationResult\n defaultValidation: ValidationResult\n messageDirection?: 'row' | 'column'\n }\n>\n\nexport const CreatePasswordField = ({\n validate,\n defaultValidation,\n messageDirection = 'row',\n label = 'Create a password',\n name = 'password',\n className,\n validation,\n appearance,\n ...rest\n}: CreatePasswordFieldProps) => {\n const { formState, control } = useFormContext()\n const [isFocused, setIsFocused] = React.useState<boolean>(false)\n const [validationResult, setValidationResult] =\n React.useState<ValidationResult>(defaultValidation)\n\n const touched: boolean = formState.touched[name]\n const error =\n formState.errors[name]?.type === 'validate' ||\n Object.values(validationResult).every((isValid) => !isValid)\n\n const validatePassword = React.useCallback(\n async (password: string) => {\n const result = await validate(password)\n\n if (result) {\n invariant(\n typeof result === 'object',\n 'The validate function must return an object'\n )\n\n setValidationResult(result)\n return Object.values(result).every((isValid) => isValid)\n }\n\n return false\n },\n [setValidationResult]\n )\n\n // useMemo, not useCallback(throttle(...)): the throttler must survive\n // re-renders or its timing window resets every render.\n const handleChange = React.useMemo(\n () => throttle(500, validatePassword),\n [validatePassword]\n )\n\n const showValidation: boolean =\n (control.mode.isOnBlur && (isFocused || touched)) ||\n (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n return (\n <div className={className}>\n <PasswordField\n label={label}\n name={name}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n handleChange(e.target.value)\n }\n onBlur={() => setIsFocused(false)}\n onFocus={() => setIsFocused(true)}\n validation={{ ...validation, validate: validatePassword }}\n appearance={appearance}\n {...rest}\n />\n {showValidation && (\n <div\n style={{ '--direction': messageDirection }}\n className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n >\n {Object.entries(validationResult).map(([message, result]) => (\n <InlineMessage\n key={message}\n theme={getMessageTheme(result, isFocused)}\n >\n {message}\n </InlineMessage>\n ))}\n </div>\n )}\n </div>\n )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;;AAaA,IAAM,mBAAmB,QAAiB,cAAuB;CAC/D,IAAI,QAAQ,OAAO;CAEnB,OAAO,YAAY,YAAY;AACjC;AAeA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,eAAe;CAC9C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,iBAAiB;CAEpD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,KAAK,EAAE,SAAS,cACjC,OAAO,OAAO,gBAAgB,CAAC,CAAC,OAAO,YAAY,CAAC,OAAO;CAE7D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,QAAQ;EAEtC,IAAI,QAAQ;GACV,UACE,OAAO,WAAW,UAClB,6CACF;GAEA,oBAAoB,MAAM;GAC1B,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,OAAO,YAAY,OAAO;EACzD;EAEA,OAAO;CACT,GACA,CAAC,mBAAmB,CACtB;CAIA,MAAM,eAAe,QAAM,cACnB,SAAS,KAAK,gBAAgB,GACpC,CAAC,gBAAgB,CACnB;CAEA,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;CAEtE,OACE,qBAAC,OAAD;EAAgB;YAAhB,CACE,oBAAC,eAAD;GACS;GACD;GACN,WAAW,MACT,aAAa,EAAE,OAAO,KAAK;GAE7B,cAAc,aAAa,KAAK;GAChC,eAAe,aAAa,IAAI;GAChC,YAAY;IAAE,GAAG;IAAY,UAAU;GAAiB;GAC5C;GACZ,GAAI;EACL,CAAA,GACA,kBACC,oBAAC,OAAD;GACE,OAAO,EAAE,eAAe,iBAAiB;GACzC,WAAU;aAET,OAAO,QAAQ,gBAAgB,CAAC,CAAC,KAAK,CAAC,SAAS,YAC/C,oBAAC,eAAD;IAEE,OAAO,gBAAgB,QAAQ,SAAS;cAEvC;GACY,GAJR,OAIQ,CAChB;EACE,CAAA,CAEJ;;AAET;AAEA,oBAAoB,cAAc"}
|
|
@@ -40,18 +40,18 @@ var SortIcon = ({ direction }) => /* @__PURE__ */ jsx(Icon, {
|
|
|
40
40
|
size: "sm",
|
|
41
41
|
className: "stroke-primary-900 absolute left-1"
|
|
42
42
|
});
|
|
43
|
+
var handleKeyDown = (event, callback) => {
|
|
44
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
45
|
+
event.preventDefault();
|
|
46
|
+
callback(event);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
43
49
|
var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items", children, className, ...rest }) => {
|
|
44
50
|
const sortDirection = header.column.getIsSorted();
|
|
45
51
|
const { isSortable: isSortableTable, getRowModel } = useDataTable();
|
|
46
52
|
const isDataColumn = header.column.getCanSort();
|
|
47
53
|
const totalRows = getRowModel()?.rows?.length;
|
|
48
54
|
const { hoverProps, isHovered } = useHover({});
|
|
49
|
-
const handleKeyDown = (event, callback) => {
|
|
50
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
51
|
-
event.preventDefault();
|
|
52
|
-
callback(event);
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
55
|
const headerSortingHandler = header.column.getToggleSortingHandler();
|
|
56
56
|
return /* @__PURE__ */ jsx(StyledTableHeaderCell, {
|
|
57
57
|
isSortable: isSortableTable && isDataColumn,
|
|
@@ -70,7 +70,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
|
|
|
70
70
|
className: cn("flex", "items-center", "relative", "size-6", "ml-2", isHovered ? "bg-primary-200" : "bg-primary-100", "rounded-sm"),
|
|
71
71
|
children: /* @__PURE__ */ jsx(SortIcon, { direction: sortDirection })
|
|
72
72
|
}),
|
|
73
|
-
includeTotal
|
|
73
|
+
includeTotal ? /* @__PURE__ */ jsxs(StyledCount, {
|
|
74
74
|
size: "sm",
|
|
75
75
|
weight: "normal",
|
|
76
76
|
children: [
|
|
@@ -80,7 +80,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
|
|
|
80
80
|
totalSuffix,
|
|
81
81
|
")"
|
|
82
82
|
]
|
|
83
|
-
})
|
|
83
|
+
}) : null
|
|
84
84
|
]
|
|
85
85
|
})
|
|
86
86
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n header: Header<Record<string, unknown>, unknown>\n includeTotal?: boolean\n totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n base: [],\n variants: {\n isSortable: {\n true: [\n '*:relative',\n 'before:absolute',\n 'before:bg-primary-100',\n 'before:duration-200',\n 'before:ease-in',\n 'before:inset-0',\n 'before:opacity-0',\n 'before:transition-opacity',\n 'cursor-pointer',\n 'hover:before:opacity-50',\n 'relative'\n ]\n }\n }\n})\n\nconst sortIcons = {\n asc: ArrowUp,\n desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n className=\"stroke-primary-900 absolute left-1\"\n />\n)\n\nexport const DataTableHeaderCell = ({\n header,\n includeTotal = false,\n totalSuffix = 'items',\n children,\n className,\n ...rest\n}: DataTableHeaderProps) => {\n const sortDirection = header.column.getIsSorted()\n const { isSortable: isSortableTable, getRowModel } = useDataTable()\n // false for display columns, e.g. \"Actions\"\n const isDataColumn = header.column.getCanSort()\n\n const totalRows = getRowModel()?.rows?.length\n\n const { hoverProps, isHovered } = useHover({})\n\n const
|
|
1
|
+
{"version":3,"file":"DataTableHeaderCell.js","names":[],"sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n header: Header<Record<string, unknown>, unknown>\n includeTotal?: boolean\n totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n base: [],\n variants: {\n isSortable: {\n true: [\n '*:relative',\n 'before:absolute',\n 'before:bg-primary-100',\n 'before:duration-200',\n 'before:ease-in',\n 'before:inset-0',\n 'before:opacity-0',\n 'before:transition-opacity',\n 'cursor-pointer',\n 'hover:before:opacity-50',\n 'relative'\n ]\n }\n }\n})\n\nconst sortIcons = {\n asc: ArrowUp,\n desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n className=\"stroke-primary-900 absolute left-1\"\n />\n)\n\nconst handleKeyDown = (\n event: React.KeyboardEvent<HTMLTableCellElement>,\n callback: (event: unknown) => void | undefined\n) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n callback(event as unknown)\n }\n}\n\nexport const DataTableHeaderCell = ({\n header,\n includeTotal = false,\n totalSuffix = 'items',\n children,\n className,\n ...rest\n}: DataTableHeaderProps) => {\n const sortDirection = header.column.getIsSorted()\n const { isSortable: isSortableTable, getRowModel } = useDataTable()\n // false for display columns, e.g. \"Actions\"\n const isDataColumn = header.column.getCanSort()\n\n const totalRows = getRowModel()?.rows?.length\n\n const { hoverProps, isHovered } = useHover({})\n\n const headerSortingHandler = header.column.getToggleSortingHandler()\n\n return (\n <StyledTableHeaderCell\n isSortable={isSortableTable && isDataColumn}\n colSpan={header.colSpan}\n onClick={\n isSortableTable && isDataColumn && headerSortingHandler\n ? headerSortingHandler\n : undefined\n }\n onKeyDown={(event) =>\n isSortableTable &&\n isDataColumn &&\n headerSortingHandler &&\n handleKeyDown(event, headerSortingHandler)\n }\n tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n {...hoverProps}\n className={className}\n {...rest}\n >\n <div\n className={cn(\n 'flex',\n 'gap-1',\n 'items-center',\n header.colSpan > 1 ? 'justify-center' : 'justify-start'\n )}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {sortDirection && isSortableTable && (\n <div\n className={cn(\n 'flex',\n 'items-center',\n 'relative',\n 'size-6',\n 'ml-2',\n isHovered ? 'bg-primary-200' : 'bg-primary-100',\n 'rounded-sm'\n )}\n >\n <SortIcon direction={sortDirection} />\n </div>\n )}\n {includeTotal ? (\n <StyledCount size=\"sm\" weight=\"normal\">\n ({totalRows} {totalSuffix})\n </StyledCount>\n ) : null}\n </div>\n </StyledTableHeaderCell>\n )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAM,iBACJ,OACA,aACG;CACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAC9C,MAAM,eAAe;EACrB,SAAS,KAAgB;CAC3B;AACF;AAEA,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,WACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C;aANF;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IAC9D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,YACF;eAEA,oBAAC,UAAD,EAAU,WAAW,cAAgB,CAAA;IAClC,CAAA;IAEN,eACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;KACf;SACX;GACD;;CACgB,CAAA;AAE3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport {
|
|
1
|
+
{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n label = 'All rows selection'\n}: {\n label?: string\n}) => {\n const {\n getIsAllPageRowsSelected,\n getIsSomePageRowsSelected,\n toggleAllPageRowsSelected,\n tableId\n } = useDataTable()\n\n const getCheckedState = () => {\n if (getIsSomePageRowsSelected()) return 'indeterminate'\n if (getIsAllPageRowsSelected()) return true\n return false\n }\n\n const updateCheckedState = () => {\n if (getIsSomePageRowsSelected()) {\n return toggleAllPageRowsSelected(false)\n }\n return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n }\n\n return (\n <>\n <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n {label}\n </label>\n <Checkbox\n size=\"lg\"\n checked={getCheckedState()}\n onCheckedChange={updateCheckedState}\n id={`${tableId}_all_rows_selection`}\n name={`${tableId}_all_rows_selection`}\n />\n </>\n )\n}\n"],"mappings":";;;;;AAKA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,IAAI,GAAG,QAAQ;EACf,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD,EAAA,CAAA;AAEN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getNewAsyncData.js","names":[],"sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n PaginationState,\n SortDirection,\n SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n AsyncDataOptions,\n AsyncDataResult,\n GetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n if (sorting[0]) {\n return sorting[0].desc ? 'desc' : 'asc'\n }\n return undefined\n}\n\nexport const getNewAsyncData = async (\n getAsyncData: GetAsyncData,\n asyncDataOptions: Partial<AsyncDataOptions>,\n paginationState: PaginationState,\n sorting: SortingState,\n globalFilter: string\n): Promise<AsyncDataResult | undefined> => {\n const { pageIndex, pageSize } = paginationState\n const params = {\n pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n pageSize: asyncDataOptions?.pageSize ?? pageSize,\n sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n }\n\n const newData = await getAsyncData(params)\n\n invariant(\n Array.isArray(newData?.results),\n 'The getAsyncData function must return an object with a property `result` which must be an array'\n )\n invariant(\n newData && Number.isInteger(newData.total) && newData.total >= 0,\n 'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n )\n\n return newData\n}\n"],"mappings":";;AAaA,IAAM,oBAAoB,YAAqD;CAC7E,IAAI,QAAQ,IACV,OAAO,QAAQ,EAAE,CAAC,OAAO,SAAS;AAGtC;AAEA,IAAa,kBAAkB,OAC7B,cACA,kBACA,iBACA,SACA,iBACyC;CACzC,MAAM,EAAE,WAAW,aAAa;CAShC,MAAM,UAAU,MAAM,aAAa;EAPjC,WAAW,kBAAkB,aAAa;EAC1C,UAAU,kBAAkB,YAAY;EACxC,QAAQ,kBAAkB,UAAU,QAAQ,EAAE,EAAE;EAChD,eAAe,kBAAkB,iBAAiB,iBAAiB,OAAO;EAC1E,cAAc,iBAAiB,gBAAgB;CAGd,CAAM;CAEzC,UACE,MAAM,QAAQ,SAAS,OAAO,GAC9B,iGACF;CACA,UACE,WAAW,OAAO,UAAU,QAAQ,KAAK,KAAK,QAAQ,SAAS,GAC/D,kHACF;CAEA,OAAO;AACT"}
|
|
1
|
+
{"version":3,"file":"getNewAsyncData.js","names":[],"sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n PaginationState,\n SortDirection,\n SortingState\n} from '@tanstack/react-table'\nimport invariant from 'tiny-invariant'\n\nimport type {\n AsyncDataOptions,\n AsyncDataResult,\n GetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n if (sorting[0]) {\n return sorting[0].desc ? 'desc' : 'asc'\n }\n return undefined\n}\n\nexport const getNewAsyncData = async (\n getAsyncData: GetAsyncData,\n asyncDataOptions: Partial<AsyncDataOptions>,\n paginationState: PaginationState,\n sorting: SortingState,\n globalFilter: string\n): Promise<AsyncDataResult | undefined> => {\n const { pageIndex, pageSize } = paginationState\n const params = {\n pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n pageSize: asyncDataOptions?.pageSize ?? pageSize,\n sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n }\n\n const newData = await getAsyncData(params)\n\n invariant(\n Array.isArray(newData?.results),\n 'The getAsyncData function must return an object with a property `result` which must be an array'\n )\n invariant(\n newData && Number.isInteger(newData.total) && newData.total >= 0,\n 'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n )\n\n return newData\n}\n"],"mappings":";;AAaA,IAAM,oBAAoB,YAAqD;CAC7E,IAAI,QAAQ,IACV,OAAO,QAAQ,EAAE,CAAC,OAAO,SAAS;AAGtC;AAEA,IAAa,kBAAkB,OAC7B,cACA,kBACA,iBACA,SACA,iBACyC;CACzC,MAAM,EAAE,WAAW,aAAa;CAShC,MAAM,UAAU,MAAM,aAAa;EAPjC,WAAW,kBAAkB,aAAa;EAC1C,UAAU,kBAAkB,YAAY;EACxC,QAAQ,kBAAkB,UAAU,QAAQ,EAAE,EAAE;EAChD,eAAe,kBAAkB,iBAAiB,iBAAiB,OAAO;EAC1E,cAAc,iBAAiB,gBAAgB;CAGd,CAAM;CAEzC,UACE,MAAM,QAAQ,SAAS,OAAO,GAC9B,iGACF;CACA,UACE,WAAW,OAAO,UAAU,QAAQ,KAAK,KAAK,QAAQ,SAAS,GAC/D,kHACF;CAEA,OAAO;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n theme?: 'white' | 'grey'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n ref?: React.Ref<HTMLInputElement>\n }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = ({\n ref,\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n appearance,\n theme,\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...rest\n}: DateInputProps) => {\n const [date, setDate] = React.useState(\n initialDate ? dayjs(initialDate).toDate() : undefined\n )\n\n const [inputElRef, setInputElRef] = useCallbackRefState()\n const composedInputRef = useComposedRefs(\n ref as React.Ref<HTMLElement>,\n setInputElRef\n )\n\n const dateString = formatDateToString(date, dateFormat)\n\n const handleInputChange = React.useCallback(\n (event) => {\n const newDateString = event.target.value\n const parsedInputDate = dayjs(newDateString, dateFormat)\n const newDate = parsedInputDate.isValid()\n ? parsedInputDate.toDate()\n : undefined\n setDate(newDate)\n onChange?.(newDate)\n },\n [dateFormat, onChange]\n )\n\n const handleCalendarChange = React.useCallback(\n (newDate) => {\n setDate(newDate)\n\n const mirrorChangeToInputElement = () => {\n if (!inputElRef) return\n\n // Call the `set` function on the input value directly to mirror the change.\n // Props to: https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call(\n inputElRef,\n formatDateToString(newDate, dateFormat)\n )\n const event = new Event('input', { bubbles: true })\n inputElRef.dispatchEvent(event)\n }\n mirrorChangeToInputElement()\n },\n [dateFormat, inputElRef]\n )\n\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n const iconSize = getFieldIconSize(size)\n\n return (\n <div className=\"relative h-max\">\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n appearance={appearance}\n theme={theme}\n {...(rest as React.ComponentProps<typeof Input>)}\n onChange={handleInputChange}\n ref={composedInputRef}\n defaultValue={dateString}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n disabled={disabled}\n label={updatedLabels.open}\n size={iconSize}\n theme=\"neutral\"\n hasTooltip={false}\n className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n className=\"z-1147483646 pr-6\"\n >\n <Calendar\n date={date || new Date()}\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await handleCalendarChange(date.date)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await handleCalendarChange(date)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,iBAAiB;AAe9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,aAAa,EACxB,KACA,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,WACiB;CACpB,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,
|
|
1
|
+
{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' | 'md' | 'lg'\n appearance?: 'standard' | 'modern'\n theme?: 'white' | 'grey'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n ref?: React.Ref<HTMLInputElement>\n }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = ({\n ref,\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n appearance,\n theme,\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...rest\n}: DateInputProps) => {\n const [date, setDate] = React.useState(\n initialDate ? dayjs(initialDate).toDate() : undefined\n )\n\n const [inputElRef, setInputElRef] = useCallbackRefState()\n const composedInputRef = useComposedRefs(\n ref as React.Ref<HTMLElement>,\n setInputElRef\n )\n\n const dateString = formatDateToString(date, dateFormat)\n\n const handleInputChange = React.useCallback(\n (event) => {\n const newDateString = event.target.value\n const parsedInputDate = dayjs(newDateString, dateFormat)\n const newDate = parsedInputDate.isValid()\n ? parsedInputDate.toDate()\n : undefined\n setDate(newDate)\n onChange?.(newDate)\n },\n [dateFormat, onChange]\n )\n\n const handleCalendarChange = React.useCallback(\n (newDate) => {\n setDate(newDate)\n\n const mirrorChangeToInputElement = () => {\n if (!inputElRef) return\n\n // Call the `set` function on the input value directly to mirror the change.\n // Props to: https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call(\n inputElRef,\n formatDateToString(newDate, dateFormat)\n )\n const event = new Event('input', { bubbles: true })\n inputElRef.dispatchEvent(event)\n }\n mirrorChangeToInputElement()\n },\n [dateFormat, inputElRef]\n )\n\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n const iconSize = getFieldIconSize(size)\n\n return (\n <div className=\"relative h-max\">\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n appearance={appearance}\n theme={theme}\n {...(rest as React.ComponentProps<typeof Input>)}\n onChange={handleInputChange}\n ref={composedInputRef}\n defaultValue={dateString}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n disabled={disabled}\n label={updatedLabels.open}\n size={iconSize}\n theme=\"neutral\"\n hasTooltip={false}\n className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n className=\"z-1147483646 pr-6\"\n >\n <Calendar\n date={\n // The calendar only mounts inside the opened popover (a\n // client-only interaction), so this `new Date()` fallback never\n // renders on the server and can't cause a hydration mismatch.\n // eslint-disable-next-line react-doctor/rendering-hydration-mismatch-time\n date || new Date()\n }\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await handleCalendarChange(date.date)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await handleCalendarChange(date)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,iBAAiB;AAe9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,aAAa,EACxB,KACA,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,WACiB;CACpB,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,MAKE,wBAAQ,IAAI,KAAK;KAEnB,UAAU;KACV,gBAAgB,OAAO,SAAS;MAC9B,gBAAgB,KAAK;MACrB,MAAM,qBAAqB,KAAK,IAAI;MACpC,IAAI,YAAY,WAAW;KAC7B;KACA,SAAS,OAAO,SAAS;MACvB,MAAM,qBAAqB,IAAI;MAC/B,IAAI,YAAY,WAAW;KAC7B;KACS;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;IACT,CAAA;GACc,CAAA,EACH,CAAA,CACT;IACN;;AAET"}
|