bonprix-design-system 0.71.0 → 0.71.1

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.
Files changed (5) hide show
  1. package/dist/components/BottomSheet/BottomSheetRoot.js +4 -6
  2. package/dist/components/BottomSheet/BottomSheetRoot.js.map +1 -1
  3. package/dist/components/SideSheet/SideSheetRoot.js +5 -6
  4. package/dist/components/SideSheet/SideSheetRoot.js.map +1 -1
  5. package/package.json +16 -16
package/dist/components/BottomSheet/BottomSheetRoot.js CHANGED
@@ -135,15 +135,14 @@ var h = c({
135
135
  className: "button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down",
136
136
  children: e
137
137
  }), b = ({ children: t, icon: n, iconPosition: r, loading: a, component: o = "button", ...s }) => {
138
- let c = o, { onClick: u, type: d = "button", ...f } = s, { onClose: p } = i(), m = (e) => {
139
- u?.(e), p();
138
+ let c = o, { onClick: u, ...d } = s, { onClose: f } = i(), p = (e) => {
139
+ u?.(e), f();
140
140
  };
141
141
  return /* @__PURE__ */ l(e, {
142
142
  component: c,
143
- ...f,
143
+ ...d,
144
144
  variant: "primary",
145
- onClick: m,
146
- type: d,
145
+ onClick: p,
147
146
  icon: n,
148
147
  iconPosition: r,
149
148
  size: "large",
@@ -156,7 +155,6 @@ var h = c({
156
155
  component: s,
157
156
  ...o,
158
157
  variant: "secondary",
159
- type: "button",
160
158
  onClick: c,
161
159
  icon: n,
162
160
  iconPosition: r,
package/dist/components/BottomSheet/BottomSheetRoot.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheetRoot.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheetRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { TitleLevel, usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, ReactNode, RefObject, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport { useInnerOpen } from \"@hooks\";\nimport { backdrop } from \"@utils/tailwindVariants\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\nimport useConsumeBottomSheet from \"./useConsumeBottomSheet\";\nimport useCreateBottomSheet from \"./useCreateBottomSheet\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight block\",\n container: \"shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-4rem)]\",\n header: \"px-4 py-3\",\n titleAndIcons: \"flex gap-2 items-center touch-pan-down\",\n contentWrapper: \"flex flex-col w-full\",\n content: [\n \"typography-body1 text-clr-primary\",\n // scroller must be a flexbox to fix scrollbar\n // scroller needs some padding to not cut off the focus-ring\n \"*:flex *:-mx-0.5 *:px-0.5\",\n // scroller must set min-h-0 in order to make scrolling work inside our flex context\n \"*:min-h-0\",\n ],\n dragHandleContainer: \"h-6 flex justify-center items-center shrink-0\",\n dragHandle: \"h-1 w-8 rounded-full bg-clr-on-bg-low\",\n backdrop: backdrop(),\n scrollArea: \"scroll-area relative\",\n },\n variants: {\n disableHorizontalPadding: {\n false: { scrollArea: \"px-4\" },\n true: \"\",\n },\n },\n});\n\ninterface SheetProps {\n /** All of the subcomponents should be placed inside this property. */\n children: ReactNode;\n /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n isOpen: boolean;\n /** Callback function, that is triggered when the sheet is attempted to be closed.\n *\n * It will be called in following cases:\n * - Click on backdrop\n * - Swipe down to close\n * - Click on \"close\" icon button in the upper-right corner\n * - Click on any button (PrimaryButton or SecondaryButton)\n *\n * Should be used in conjunction with `isOpen`. */\n onClose: () => void;\n /** Callback to execute when clicking back icon. */\n onBack?: () => void;\n /** The z-index of the sheet.. */\n zIndex?: number;\n}\n\nexport interface SheetTitleProps {\n /** The text content. */\n children: string;\n /** An optional subline that is displayed right below the title. */\n subline?: string;\n /** The heading level for the title. */\n level?: TitleLevel;\n}\n\nexport interface SheetButtonSectionProps {\n /** Primary and secondary buttons should be placed inside this section. */\n children: ReactNode;\n}\n\nexport interface SheetContentProps {\n /** The content of the content section. */\n children: ReactNode;\n /** If `true`, the horizontal padding around the content will be removed. */\n disableHorizontalPadding?: boolean;\n}\n\nexport interface SheetButtonBaseProps {\n /** The label of the button. */\n children: string;\n /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n icon?: IconType;\n /** The position of the icon relative to the content. */\n iconPosition?: \"start\" | \"end\";\n}\n\nexport type SheetButtonProps<C extends ElementType> = SheetButtonBaseProps & {\n /** The semantic component to render the Button. Preferrably `\"button\"`. Defaults to `\"button\"`. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof SheetButtonBaseProps | \"component\">;\n\ntype SheetPrimaryButtonProps<C extends ElementType> = SheetButtonProps<C> & {\n /** If `true`, a loading spinner will be shown instead of the content. */\n loading?: boolean;\n};\n\nexport interface Props extends SheetProps {\n /** A reference to the root element of the sheet. */\n ref?: RefObject<HTMLDivElement>;\n}\n\nconst BottomSheetRoot = ({ children, isOpen, onClose, onBack, zIndex = 9999, ref }: Props) => {\n // TODO: add aria-modal = true once we implemented the dialog pattern fully and i.e. manage the focus\n const prefersReducedMotion = usePrefersReducedMotion();\n const { root, container, dragHandleContainer, dragHandle, content, contentWrapper, backdrop } = generateClasses();\n const { isShown, scrollRef, scrollPosition } = useCreateBottomSheet({ isOpen });\n\n // When \"middle\" or \"bottom\", dragging is disabled to allow for regular scrolling.\n // When at \"top\", we need to enable drag to close. When `undefined`, the element is not scrollable and can be dragged, too.\n const disableDrag = scrollPosition === \"middle\" || scrollPosition === \"bottom\";\n\n const { innerOpen } = useInnerOpen(isShown);\n\n const titleId = useId();\n\n return (\n <Sheet\n isOpen={innerOpen}\n onClose={onClose}\n className={root()}\n detent=\"content\"\n data-bpds=\"bottom-sheet\"\n prefersReducedMotion={prefersReducedMotion}\n style={{\n // @ts-expect-error setting custom properties is not recognized by React.CSSProperties\n // This is consumed by the inner ScrollArea to fix drag to close.\n \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\",\n // We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc.\n pointerEvents: undefined,\n // When removing react-modal-sheet's pointerEvents handling, we need to adjust visibility because we can no longer rely on `pointer-events: none` being set on the wrapper that spans the whole page even when closed.\n visibility: innerOpen ? \"visible\" : \"hidden\",\n zIndex: zIndex,\n }}\n role=\"dialog\"\n avoidKeyboard={false}\n aria-labelledby={titleId}\n >\n {/* We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc. */}\n <Sheet.Container className={container()} ref={ref} style={{ pointerEvents: undefined }}>\n <Sheet.Header unstyled className={dragHandleContainer()}>\n <Sheet.DragIndicator unstyled className={dragHandle()} />\n </Sheet.Header>\n <ZIndexContext.Provider value={zIndex}>\n <BottomSheetContext.Provider value={{ scrollRef, scrollPosition, onClose, onBack, titleId }}>\n <Sheet.Content\n className={content()}\n // disable default scrolling\n disableScroll\n // Dragging is still managed by `Sheet.Content` so we control it here\n disableDrag={disableDrag}\n // Apply keyboard height as padding bottom to keep content above the keyboard\n style={{ paddingBottom: \"max(var(--keyboard-inset-height, 0rem), var(--app-safe-area-inset-bottom, 1rem))\" }}\n >\n <div className={contentWrapper()}>{children}</div>\n </Sheet.Content>\n </BottomSheetContext.Provider>\n </ZIndexContext.Provider>\n </Sheet.Container>\n {/* TODO: Deactivate the animation, when the user prefers reduced motion: https://github.com/Temzasse/react-modal-sheet/issues/227 */}\n <Sheet.Backdrop aria-label=\"Bottom Sheet schließen\" onTap={onClose} className={backdrop()} />\n </Sheet>\n );\n};\n\nexport default BottomSheetRoot;\n\nexport const Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n const { onBack, onClose, titleId } = useConsumeBottomSheet();\n const { header, titleAndIcons } = generateClasses();\n return (\n <div className={header()}>\n <div className={titleAndIcons()}>\n {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n <Typography variant=\"bonprix-h6\" component={level} className=\"grow line-clamp-2\" id={titleId}>\n {children}\n </Typography>\n <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n </div>\n {subline && <Typography>{subline}</Typography>}\n </div>\n );\n};\n\nexport const Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n const { scrollRef: setScrollRef } = useConsumeBottomSheet();\n const { scrollArea } = generateClasses({ disableHorizontalPadding });\n return (\n <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding} tabIndex={0}>\n {children}\n </div>\n );\n};\n\nexport const ButtonSection = ({ children }: SheetButtonSectionProps) => {\n return <div className=\"button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\">{children}</div>;\n};\n\nexport const PrimaryButton = <C extends ElementType>({\n children,\n icon,\n iconPosition,\n loading,\n component = \"button\" as C,\n ...props\n}: SheetPrimaryButtonProps<C>) => {\n const Component: ElementType = component;\n const { onClick, type = \"button\", ...otherProps } = props;\n const { onClose } = useConsumeBottomSheet();\n const handleClick = (event: React.MouseEvent) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n onClick?.(event);\n onClose();\n };\n return (\n <Button\n component={Component}\n {...otherProps}\n variant=\"primary\"\n onClick={handleClick}\n type={type}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n loading={loading}\n >\n {children}\n </Button>\n );\n};\n\nexport const SecondaryButton = <C extends ElementType>({\n children,\n icon,\n iconPosition,\n component = \"button\" as C,\n ...props\n}: SheetButtonProps<C>) => {\n const Component: ElementType = component;\n const { onClose } = useConsumeBottomSheet();\n return (\n <Button\n component={Component}\n {...props}\n variant=\"secondary\"\n type=\"button\"\n onClick={onClose}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n >\n {children}\n </Button>\n );\n};\n\nBottomSheetRoot.displayName = \"BottomSheet\";\n"],"mappings":"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"}
1
+ {"version":3,"file":"BottomSheetRoot.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheetRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { TitleLevel, usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, ReactNode, RefObject, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport { useInnerOpen } from \"@hooks\";\nimport { backdrop } from \"@utils/tailwindVariants\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\nimport useConsumeBottomSheet from \"./useConsumeBottomSheet\";\nimport useCreateBottomSheet from \"./useCreateBottomSheet\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight block\",\n container: \"shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-4rem)]\",\n header: \"px-4 py-3\",\n titleAndIcons: \"flex gap-2 items-center touch-pan-down\",\n contentWrapper: \"flex flex-col w-full\",\n content: [\n \"typography-body1 text-clr-primary\",\n // scroller must be a flexbox to fix scrollbar\n // scroller needs some padding to not cut off the focus-ring\n \"*:flex *:-mx-0.5 *:px-0.5\",\n // scroller must set min-h-0 in order to make scrolling work inside our flex context\n \"*:min-h-0\",\n ],\n dragHandleContainer: \"h-6 flex justify-center items-center shrink-0\",\n dragHandle: \"h-1 w-8 rounded-full bg-clr-on-bg-low\",\n backdrop: backdrop(),\n scrollArea: \"scroll-area relative\",\n },\n variants: {\n disableHorizontalPadding: {\n false: { scrollArea: \"px-4\" },\n true: \"\",\n },\n },\n});\n\ninterface SheetProps {\n /** All of the subcomponents should be placed inside this property. */\n children: ReactNode;\n /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n isOpen: boolean;\n /** Callback function, that is triggered when the sheet is attempted to be closed.\n *\n * It will be called in following cases:\n * - Click on backdrop\n * - Swipe down to close\n * - Click on \"close\" icon button in the upper-right corner\n * - Click on any button (PrimaryButton or SecondaryButton)\n *\n * Should be used in conjunction with `isOpen`. */\n onClose: () => void;\n /** Callback to execute when clicking back icon. */\n onBack?: () => void;\n /** The z-index of the sheet.. */\n zIndex?: number;\n}\n\nexport interface SheetTitleProps {\n /** The text content. */\n children: string;\n /** An optional subline that is displayed right below the title. */\n subline?: string;\n /** The heading level for the title. */\n level?: TitleLevel;\n}\n\nexport interface SheetButtonSectionProps {\n /** Primary and secondary buttons should be placed inside this section. */\n children: ReactNode;\n}\n\nexport interface SheetContentProps {\n /** The content of the content section. */\n children: ReactNode;\n /** If `true`, the horizontal padding around the content will be removed. */\n disableHorizontalPadding?: boolean;\n}\n\nexport interface SheetButtonBaseProps {\n /** The label of the button. */\n children: string;\n /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n icon?: IconType;\n /** The position of the icon relative to the content. */\n iconPosition?: \"start\" | \"end\";\n}\n\nexport type SheetButtonProps<C extends ElementType> = SheetButtonBaseProps & {\n /** The semantic component to render the Button. Preferrably `\"button\"`. Defaults to `\"button\"`. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof SheetButtonBaseProps | \"component\">;\n\ntype SheetPrimaryButtonProps<C extends ElementType> = SheetButtonProps<C> & {\n /** If `true`, a loading spinner will be shown instead of the content. */\n loading?: boolean;\n};\n\nexport interface Props extends SheetProps {\n /** A reference to the root element of the sheet. */\n ref?: RefObject<HTMLDivElement>;\n}\n\nconst BottomSheetRoot = ({ children, isOpen, onClose, onBack, zIndex = 9999, ref }: Props) => {\n // TODO: add aria-modal = true once we implemented the dialog pattern fully and i.e. manage the focus\n const prefersReducedMotion = usePrefersReducedMotion();\n const { root, container, dragHandleContainer, dragHandle, content, contentWrapper, backdrop } = generateClasses();\n const { isShown, scrollRef, scrollPosition } = useCreateBottomSheet({ isOpen });\n\n // When \"middle\" or \"bottom\", dragging is disabled to allow for regular scrolling.\n // When at \"top\", we need to enable drag to close. When `undefined`, the element is not scrollable and can be dragged, too.\n const disableDrag = scrollPosition === \"middle\" || scrollPosition === \"bottom\";\n\n const { innerOpen } = useInnerOpen(isShown);\n\n const titleId = useId();\n\n return (\n <Sheet\n isOpen={innerOpen}\n onClose={onClose}\n className={root()}\n detent=\"content\"\n data-bpds=\"bottom-sheet\"\n prefersReducedMotion={prefersReducedMotion}\n style={{\n // @ts-expect-error setting custom properties is not recognized by React.CSSProperties\n // This is consumed by the inner ScrollArea to fix drag to close.\n \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\",\n // We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc.\n pointerEvents: undefined,\n // When removing react-modal-sheet's pointerEvents handling, we need to adjust visibility because we can no longer rely on `pointer-events: none` being set on the wrapper that spans the whole page even when closed.\n visibility: innerOpen ? \"visible\" : \"hidden\",\n zIndex: zIndex,\n }}\n role=\"dialog\"\n avoidKeyboard={false}\n aria-labelledby={titleId}\n >\n {/* We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc. */}\n <Sheet.Container className={container()} ref={ref} style={{ pointerEvents: undefined }}>\n <Sheet.Header unstyled className={dragHandleContainer()}>\n <Sheet.DragIndicator unstyled className={dragHandle()} />\n </Sheet.Header>\n <ZIndexContext.Provider value={zIndex}>\n <BottomSheetContext.Provider value={{ scrollRef, scrollPosition, onClose, onBack, titleId }}>\n <Sheet.Content\n className={content()}\n // disable default scrolling\n disableScroll\n // Dragging is still managed by `Sheet.Content` so we control it here\n disableDrag={disableDrag}\n // Apply keyboard height as padding bottom to keep content above the keyboard\n style={{ paddingBottom: \"max(var(--keyboard-inset-height, 0rem), var(--app-safe-area-inset-bottom, 1rem))\" }}\n >\n <div className={contentWrapper()}>{children}</div>\n </Sheet.Content>\n </BottomSheetContext.Provider>\n </ZIndexContext.Provider>\n </Sheet.Container>\n {/* TODO: Deactivate the animation, when the user prefers reduced motion: https://github.com/Temzasse/react-modal-sheet/issues/227 */}\n <Sheet.Backdrop aria-label=\"Bottom Sheet schließen\" onTap={onClose} className={backdrop()} />\n </Sheet>\n );\n};\n\nexport default BottomSheetRoot;\n\nexport const Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n const { onBack, onClose, titleId } = useConsumeBottomSheet();\n const { header, titleAndIcons } = generateClasses();\n return (\n <div className={header()}>\n <div className={titleAndIcons()}>\n {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n <Typography variant=\"bonprix-h6\" component={level} className=\"grow line-clamp-2\" id={titleId}>\n {children}\n </Typography>\n <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n </div>\n {subline && <Typography>{subline}</Typography>}\n </div>\n );\n};\n\nexport const Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n const { scrollRef: setScrollRef } = useConsumeBottomSheet();\n const { scrollArea } = generateClasses({ disableHorizontalPadding });\n return (\n <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding} tabIndex={0}>\n {children}\n </div>\n );\n};\n\nexport const ButtonSection = ({ children }: SheetButtonSectionProps) => {\n return <div className=\"button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\">{children}</div>;\n};\n\nexport const PrimaryButton = <C extends ElementType>({\n children,\n icon,\n iconPosition,\n loading,\n component = \"button\" as C,\n ...props\n}: SheetPrimaryButtonProps<C>) => {\n const Component: ElementType = component;\n const { onClick, ...otherProps } = props;\n const { onClose } = useConsumeBottomSheet();\n const handleClick = (event: React.MouseEvent) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n onClick?.(event);\n onClose();\n };\n return (\n <Button\n component={Component}\n {...otherProps}\n variant=\"primary\"\n onClick={handleClick}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n loading={loading}\n >\n {children}\n </Button>\n );\n};\n\nexport const SecondaryButton = <C extends ElementType>({\n children,\n icon,\n iconPosition,\n component = \"button\" as C,\n ...props\n}: SheetButtonProps<C>) => {\n const Component: ElementType = component;\n const { onClose } = useConsumeBottomSheet();\n return (\n <Button component={Component} {...props} variant=\"secondary\" onClick={onClose} icon={icon} iconPosition={iconPosition} size=\"large\">\n {children}\n </Button>\n );\n};\n\nBottomSheetRoot.displayName = \"BottomSheet\";\n"],"mappings":"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"}
package/dist/components/SideSheet/SideSheetRoot.js CHANGED
@@ -134,15 +134,14 @@ var _ = l({
134
134
  })
135
135
  });
136
136
  }, S = ({ children: t, icon: n, iconPosition: r, loading: i, component: a = "button", ...o }) => {
137
- let { onClick: c, type: l = "button", ...d } = o, f = a, { onClose: p } = s(), m = (e) => {
138
- c?.(e), p();
137
+ let { onClick: c, ...l } = o, d = a, { onClose: f } = s(), p = (e) => {
138
+ c?.(e), f();
139
139
  };
140
140
  return /* @__PURE__ */ u(e, {
141
- component: f,
142
- ...d,
141
+ component: d,
142
+ ...l,
143
143
  variant: "primary",
144
- onClick: m,
145
- type: l,
144
+ onClick: p,
146
145
  icon: n,
147
146
  iconPosition: r,
148
147
  size: "large",
package/dist/components/SideSheet/SideSheetRoot.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SideSheetRoot.js","names":[],"sources":["../../../src/components/SideSheet/SideSheetRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport type { IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport { twMerge } from \"tailwind-merge\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\n\nimport { Button } from \"@components/Buttons\";\nimport { useBreakpointDown, useInnerOpen } from \"@hooks\";\nimport { backdrop, fadeAnimation, slideAnimation } from \"@utils/tailwindVariants\";\n\nimport SideSheetContext from \"./SideSheetContext\";\nimport useConsumeSideSheet from \"./useConsumeSideSheet\";\n\nimport \"./styles.css\";\n\nimport { TitleLevel } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n slots: {\n modal: \"preflight fixed h-dvh flex flex-col bg-clr-bg-modal -end-100 top-0 outline-none\",\n header: \"px-4 py-6\",\n titleAndIcons: \"flex gap-2 items-center\",\n scrollArea: \"h-full scroll-area relative\",\n buttonSection: \"w-full flex flex-col gap-3 px-4 pt-6 shrink-0\",\n backdrop: backdrop(),\n contentWrapper: \"flex flex-col w-full grow typography-body1 text-clr-primary pb-6 overflow-hidden\",\n },\n variants: {\n disableHorizontalPadding: {\n false: { scrollArea: \"px-4\" },\n },\n prefersReducedMotion: {\n false: {\n modal: slideAnimation(),\n backdrop: fadeAnimation(),\n },\n true: {\n modal: \"end-0\",\n },\n },\n hasDynamicWidth: {\n false: {\n modal: \"w-100\",\n },\n true: {\n modal: \"min-w-100 w-fit max-w-150\",\n },\n },\n },\n});\n\ninterface SheetProps {\n /** All of the subcomponents should be placed inside this property. */\n children: ReactNode;\n /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n isOpen: boolean;\n /** Callback function, that is triggered when the sheet is attempted to be closed.\n *\n * It will be called in following cases:\n * - Click on backdrop\n * - Swipe down to close\n * - Click on \"close\" icon button in the upper-right corner\n * - Click on any button (PrimaryButton or SecondaryButton)\n *\n * Should be used in conjunction with `isOpen`. */\n onClose: () => void;\n /** Callback to execute when clicking back icon. */\n onBack?: () => void;\n /** The z-index of the sheet.. */\n zIndex?: number;\n}\n\nexport interface SheetTitleProps {\n /** The text content. */\n children: string;\n /** An optional subline that is displayed right below the title. */\n subline?: string;\n /** The heading level for the title. */\n level?: TitleLevel;\n}\n\nexport interface SheetButtonSectionProps {\n /** Primary and secondary buttons should be placed inside this section. */\n children: ReactNode;\n}\n\nexport interface SheetContentProps {\n /** The content of the content section. */\n children: ReactNode;\n /** If `true`, the horizontal padding around the content will be removed. */\n disableHorizontalPadding?: boolean;\n}\n\nexport interface SheetButtonBaseProps {\n /** The label of the button. */\n children: string;\n /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n icon?: IconType;\n /** The position of the icon relative to the content. */\n iconPosition?: \"start\" | \"end\";\n}\n\nexport type SheetButtonProps<C extends ElementType> = SheetButtonBaseProps & {\n /** The semantic component to render the Button. Preferrably `\"button\"`. Defaults to `\"button\"`. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof SheetButtonBaseProps | \"component\">;\n\ntype SheetPrimaryButtonProps<C extends ElementType> = SheetButtonProps<C> & {\n /** If `true`, a loading spinner will be shown instead of the content. */\n loading?: boolean;\n};\n\nexport interface Props extends SheetProps {\n /** When set to false, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. */\n modeless?: boolean;\n /** Makes the Sheet of 400px fixed or able to expand up to 600px depending on the content */\n hasDynamicWidth?: boolean;\n}\n\nconst SideSheetRoot = ({ children, isOpen, modeless = false, onClose, onBack, zIndex = 9999, hasDynamicWidth = false }: Props) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const isMobile = useBreakpointDown(\"m\");\n const { modal: modalClass, backdrop, contentWrapper } = generateClasses({ hasDynamicWidth, prefersReducedMotion });\n\n const { innerOpen } = useInnerOpen(isOpen);\n\n if (isMobile) return;\n\n const shiftFocusProgrammatically = (event: Event) => {\n event.preventDefault();\n const target = event.target as HTMLElement;\n target.focus();\n };\n\n return (\n <DialogPrimitive.Root open={innerOpen} modal={!modeless}>\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay className={backdrop()} onClick={onClose} style={{ zIndex }} />\n <DialogPrimitive.Content\n className={modalClass()}\n style={{ zIndex }}\n aria-describedby={undefined}\n onOpenAutoFocus={shiftFocusProgrammatically}\n tabIndex={-1}\n data-bpds=\"side-sheet\"\n data-bpds-modeless={modeless}\n data-bpds-has-dynamic-width={hasDynamicWidth}\n aria-modal={!modeless}\n >\n <ZIndexContext.Provider value={zIndex}>\n <SideSheetContext.Provider value={{ onClose, onBack }}>\n <div className={contentWrapper()}>{children}</div>\n </SideSheetContext.Provider>\n </ZIndexContext.Provider>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n};\n\nexport const Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n const { onBack, onClose } = useConsumeSideSheet();\n const { header, titleAndIcons } = generateClasses();\n return (\n <div className={header()}>\n <div className={titleAndIcons()}>\n {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n <DialogPrimitive.Title asChild>\n <div className=\"grow\">\n <Typography variant=\"bonprix-h6\" component={level} className=\"line-clamp-2\">\n {children}\n </Typography>\n </div>\n </DialogPrimitive.Title>\n <DialogPrimitive.Close asChild>\n <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n </DialogPrimitive.Close>\n </div>\n {subline && <Typography>{subline}</Typography>}\n </div>\n );\n};\n\nexport const Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n const { scrollArea } = generateClasses({ disableHorizontalPadding });\n return (\n <div className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding}>\n {children}\n </div>\n );\n};\n\nexport const ButtonSection = ({ children }: SheetButtonSectionProps) => {\n const { buttonSection } = generateClasses();\n return (\n <div className=\"button-section-container\">\n <div className={twMerge(buttonSection(), \"button-section\")}>{children}</div>\n </div>\n );\n};\n\nexport const PrimaryButton = <C extends ElementType>({\n children,\n icon,\n iconPosition,\n loading,\n component = \"button\" as C,\n ...props\n}: SheetPrimaryButtonProps<C>) => {\n const { onClick, type = \"button\", ...otherProps } = props;\n const Component: ElementType = component;\n const { onClose } = useConsumeSideSheet();\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n onClick?.(event);\n onClose();\n };\n return (\n <Button\n component={Component}\n {...otherProps}\n variant=\"primary\"\n onClick={handleClick}\n type={type}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n loading={loading}\n >\n {children}\n </Button>\n );\n};\n\nexport const SecondaryButton = <C extends ElementType>({\n children,\n icon,\n iconPosition,\n component = \"button\" as C,\n ...props\n}: SheetButtonProps<C>) => {\n const Component: ElementType = component;\n const { onClose } = useConsumeSideSheet();\n return (\n <Button\n component={Component}\n {...props}\n variant=\"secondary\"\n type=\"button\"\n onClick={onClose}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n >\n {children}\n </Button>\n );\n};\n\nSideSheetRoot.displayName = \"SideSheet\";\n\nexport default SideSheetRoot;\n"],"mappings":"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"}
1
+ {"version":3,"file":"SideSheetRoot.js","names":[],"sources":["../../../src/components/SideSheet/SideSheetRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport type { IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport { twMerge } from \"tailwind-merge\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\n\nimport { Button } from \"@components/Buttons\";\nimport { useBreakpointDown, useInnerOpen } from \"@hooks\";\nimport { backdrop, fadeAnimation, slideAnimation } from \"@utils/tailwindVariants\";\n\nimport SideSheetContext from \"./SideSheetContext\";\nimport useConsumeSideSheet from \"./useConsumeSideSheet\";\n\nimport \"./styles.css\";\n\nimport { TitleLevel } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n slots: {\n modal: \"preflight fixed h-dvh flex flex-col bg-clr-bg-modal -end-100 top-0 outline-none\",\n header: \"px-4 py-6\",\n titleAndIcons: \"flex gap-2 items-center\",\n scrollArea: \"h-full scroll-area relative\",\n buttonSection: \"w-full flex flex-col gap-3 px-4 pt-6 shrink-0\",\n backdrop: backdrop(),\n contentWrapper: \"flex flex-col w-full grow typography-body1 text-clr-primary pb-6 overflow-hidden\",\n },\n variants: {\n disableHorizontalPadding: {\n false: { scrollArea: \"px-4\" },\n },\n prefersReducedMotion: {\n false: {\n modal: slideAnimation(),\n backdrop: fadeAnimation(),\n },\n true: {\n modal: \"end-0\",\n },\n },\n hasDynamicWidth: {\n false: {\n modal: \"w-100\",\n },\n true: {\n modal: \"min-w-100 w-fit max-w-150\",\n },\n },\n },\n});\n\ninterface SheetProps {\n /** All of the subcomponents should be placed inside this property. */\n children: ReactNode;\n /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n isOpen: boolean;\n /** Callback function, that is triggered when the sheet is attempted to be closed.\n *\n * It will be called in following cases:\n * - Click on backdrop\n * - Swipe down to close\n * - Click on \"close\" icon button in the upper-right corner\n * - Click on any button (PrimaryButton or SecondaryButton)\n *\n * Should be used in conjunction with `isOpen`. */\n onClose: () => void;\n /** Callback to execute when clicking back icon. */\n onBack?: () => void;\n /** The z-index of the sheet.. */\n zIndex?: number;\n}\n\nexport interface SheetTitleProps {\n /** The text content. */\n children: string;\n /** An optional subline that is displayed right below the title. */\n subline?: string;\n /** The heading level for the title. */\n level?: TitleLevel;\n}\n\nexport interface SheetButtonSectionProps {\n /** Primary and secondary buttons should be placed inside this section. */\n children: ReactNode;\n}\n\nexport interface SheetContentProps {\n /** The content of the content section. */\n children: ReactNode;\n /** If `true`, the horizontal padding around the content will be removed. */\n disableHorizontalPadding?: boolean;\n}\n\nexport interface SheetButtonBaseProps {\n /** The label of the button. */\n children: string;\n /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n icon?: IconType;\n /** The position of the icon relative to the content. */\n iconPosition?: \"start\" | \"end\";\n}\n\nexport type SheetButtonProps<C extends ElementType> = SheetButtonBaseProps & {\n /** The semantic component to render the Button. Preferrably `\"button\"`. Defaults to `\"button\"`. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof SheetButtonBaseProps | \"component\">;\n\ntype SheetPrimaryButtonProps<C extends ElementType> = SheetButtonProps<C> & {\n /** If `true`, a loading spinner will be shown instead of the content. */\n loading?: boolean;\n};\n\nexport interface Props extends SheetProps {\n /** When set to false, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. */\n modeless?: boolean;\n /** Makes the Sheet of 400px fixed or able to expand up to 600px depending on the content */\n hasDynamicWidth?: boolean;\n}\n\nconst SideSheetRoot = ({ children, isOpen, modeless = false, onClose, onBack, zIndex = 9999, hasDynamicWidth = false }: Props) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const isMobile = useBreakpointDown(\"m\");\n const { modal: modalClass, backdrop, contentWrapper } = generateClasses({ hasDynamicWidth, prefersReducedMotion });\n\n const { innerOpen } = useInnerOpen(isOpen);\n\n if (isMobile) return;\n\n const shiftFocusProgrammatically = (event: Event) => {\n event.preventDefault();\n const target = event.target as HTMLElement;\n target.focus();\n };\n\n return (\n <DialogPrimitive.Root open={innerOpen} modal={!modeless}>\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay className={backdrop()} onClick={onClose} style={{ zIndex }} />\n <DialogPrimitive.Content\n className={modalClass()}\n style={{ zIndex }}\n aria-describedby={undefined}\n onOpenAutoFocus={shiftFocusProgrammatically}\n tabIndex={-1}\n data-bpds=\"side-sheet\"\n data-bpds-modeless={modeless}\n data-bpds-has-dynamic-width={hasDynamicWidth}\n aria-modal={!modeless}\n >\n <ZIndexContext.Provider value={zIndex}>\n <SideSheetContext.Provider value={{ onClose, onBack }}>\n <div className={contentWrapper()}>{children}</div>\n </SideSheetContext.Provider>\n </ZIndexContext.Provider>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n};\n\nexport const Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n const { onBack, onClose } = useConsumeSideSheet();\n const { header, titleAndIcons } = generateClasses();\n return (\n <div className={header()}>\n <div className={titleAndIcons()}>\n {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n <DialogPrimitive.Title asChild>\n <div className=\"grow\">\n <Typography variant=\"bonprix-h6\" component={level} className=\"line-clamp-2\">\n {children}\n </Typography>\n </div>\n </DialogPrimitive.Title>\n <DialogPrimitive.Close asChild>\n <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n </DialogPrimitive.Close>\n </div>\n {subline && <Typography>{subline}</Typography>}\n </div>\n );\n};\n\nexport const Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n const { scrollArea } = generateClasses({ disableHorizontalPadding });\n return (\n <div className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding}>\n {children}\n </div>\n );\n};\n\nexport const ButtonSection = ({ children }: SheetButtonSectionProps) => {\n const { buttonSection } = generateClasses();\n return (\n <div className=\"button-section-container\">\n <div className={twMerge(buttonSection(), \"button-section\")}>{children}</div>\n </div>\n );\n};\n\nexport const PrimaryButton = <C extends ElementType>({\n children,\n icon,\n iconPosition,\n loading,\n component = \"button\" as C,\n ...props\n}: SheetPrimaryButtonProps<C>) => {\n const { onClick, ...otherProps } = props;\n const Component: ElementType = component;\n const { onClose } = useConsumeSideSheet();\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n onClick?.(event);\n onClose();\n };\n return (\n <Button\n component={Component}\n {...otherProps}\n variant=\"primary\"\n onClick={handleClick}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n loading={loading}\n >\n {children}\n </Button>\n );\n};\n\nexport const SecondaryButton = <C extends ElementType>({\n children,\n icon,\n iconPosition,\n component = \"button\" as C,\n ...props\n}: SheetButtonProps<C>) => {\n const Component: ElementType = component;\n const { onClose } = useConsumeSideSheet();\n return (\n <Button\n component={Component}\n {...props}\n variant=\"secondary\"\n type=\"button\"\n onClick={onClose}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n >\n {children}\n </Button>\n );\n};\n\nSideSheetRoot.displayName = \"SideSheet\";\n\nexport default SideSheetRoot;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonprix-design-system",
3
- "version": "0.71.0",
3
+ "version": "0.71.1",
4
4
  "description": "Design System of bonprix",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -48,37 +48,37 @@
48
48
  "tailwind-merge": "2.6.1",
49
49
  "tailwind-variants": "0.3.1",
50
50
  "@bonprix-ds/assets": "1.1.0",
51
- "@bonprix-ds/internal-components": "0.1.3",
52
- "@bonprix-ds/react-accordion": "1.0.5",
53
- "@bonprix-ds/react-alert": "1.0.4",
51
+ "@bonprix-ds/internal-components": "0.1.4",
52
+ "@bonprix-ds/react-alert": "1.0.5",
54
53
  "@bonprix-ds/react-availability": "1.0.3",
54
+ "@bonprix-ds/react-accordion": "1.0.5",
55
55
  "@bonprix-ds/react-benefit-tag": "1.1.4",
56
- "@bonprix-ds/react-checkbox": "1.0.4",
57
- "@bonprix-ds/react-container": "1.0.3",
56
+ "@bonprix-ds/react-checkbox": "1.0.5",
57
+ "@bonprix-ds/react-checkbox-group": "1.0.5",
58
58
  "@bonprix-ds/react-collapsible": "1.0.5",
59
59
  "@bonprix-ds/react-date-time-field": "1.0.2",
60
+ "@bonprix-ds/react-container": "1.0.3",
60
61
  "@bonprix-ds/react-date-field": "1.0.2",
61
62
  "@bonprix-ds/react-figurine": "1.0.4",
62
63
  "@bonprix-ds/react-grid": "1.0.3",
63
- "@bonprix-ds/react-checkbox-group": "1.0.4",
64
+ "@bonprix-ds/react-icon": "1.1.2",
65
+ "@bonprix-ds/react-icon-button": "1.1.4",
64
66
  "@bonprix-ds/react-illustration": "1.0.4",
65
- "@bonprix-ds/react-icon-button": "1.1.3",
66
67
  "@bonprix-ds/react-list": "1.1.4",
67
- "@bonprix-ds/react-pagination": "1.1.3",
68
+ "@bonprix-ds/react-logo": "1.0.5",
69
+ "@bonprix-ds/react-pagination": "1.1.4",
68
70
  "@bonprix-ds/react-price": "1.1.0",
69
71
  "@bonprix-ds/react-price-stacked": "1.0.4",
70
- "@bonprix-ds/react-radio-group": "1.0.4",
72
+ "@bonprix-ds/react-radio-group": "1.0.5",
71
73
  "@bonprix-ds/react-rating": "1.0.4",
72
- "@bonprix-ds/react-select": "1.0.5",
73
- "@bonprix-ds/react-logo": "1.0.5",
74
+ "@bonprix-ds/react-select": "1.0.6",
74
75
  "@bonprix-ds/react-spinner": "1.0.3",
75
76
  "@bonprix-ds/react-step-navi": "1.0.4",
76
77
  "@bonprix-ds/react-switch": "1.0.4",
77
- "@bonprix-ds/react-typography": "1.0.3",
78
- "@bonprix-ds/utils": "0.2.0",
79
- "@bonprix-ds/react-icon": "1.1.2",
80
78
  "@bonprix-ds/react-time-field": "1.0.2",
81
- "@bonprix-ds/react-tooltip": "1.0.3"
79
+ "@bonprix-ds/react-tooltip": "1.0.3",
80
+ "@bonprix-ds/react-typography": "1.0.3",
81
+ "@bonprix-ds/utils": "0.2.0"
82
82
  },
83
83
  "peerDependencies": {
84
84
  "lit": "^3.3.1",