@7shifts/sous-chef 4.9.0 → 4.10.0

package/dist/overlay/DropdownListDivider/DropdownListDivider.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 type Props = {
     testId?: string;
+    children?: React.ReactNode;
+    line?: 'top' | 'bottom' | 'both';
 };
-declare const DropdownListDivider: ({ testId }: Props) => React.JSX.Element;
+declare const DropdownListDivider: ({ testId, children, line }: Props) => React.JSX.Element;
 export default DropdownListDivider;

package/dist/overlay/DropdownListDividerLine/DropdownListDividerLine.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    testId?: string;
+};
+declare const DropdownListDividerLine: ({ testId }: Props) => React.JSX.Element;
+export default DropdownListDividerLine;

package/dist/overlay/DropdownListDividerLine/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DropdownListDividerLine';

package/dist/overlay/HintModal/HintModal.d.ts

@@ -10,9 +10,10 @@ export type Props = {
     secondaryButton?: React.ReactElement;
     testId?: string;
     onSetDoNotShowAgainStatus?: (doNotShowAgain: boolean) => void;
+    hideDoNotShowAgainCheckbox?: boolean;
 } & PositionStyles;
 /**
  * Hint Modal is a lightweight modal used to surface tips, guidance, or onboarding callouts to users the first time they encounter a feature or page. Unlike a regular Modal, it is not triggered by a user action — it appears automatically when the user navigates somewhere that warrants a guided introduction. It includes a "Don't show this again" option so users can dismiss it permanently once they've absorbed the information.
  */
-declare const HintModal: ({ header, children, mediaUrl, onClose, modalId, primaryButton, secondaryButton, testId, onSetDoNotShowAgainStatus, ...positionProps }: Props) => React.JSX.Element;
+declare const HintModal: ({ header, children, mediaUrl, onClose, modalId, primaryButton, secondaryButton, testId, onSetDoNotShowAgainStatus, hideDoNotShowAgainCheckbox, ...positionProps }: Props) => React.JSX.Element;
 export default HintModal;

package/dist/overlay/Modal/Modal.d.ts

@@ -17,12 +17,19 @@ type Props = {
     maxWidth?: number | string;
     shouldReturnFocusAfterClose?: boolean;
     testId?: string;
+    /** Enables drag-to-reposition. The overlay becomes transparent and the modal can be moved by dragging its header. */
+    draggable?: boolean;
+    /** Initial screen position when draggable is true. Defaults to centered horizontally at 25% from top. */
+    initialPosition?: {
+        top: number;
+        left: number;
+    };
 } & DataProps;
 /**
  * Modal is a focused overlay that interrupts the current experience and demands the user's attention. It blocks all interaction with the rest of the page until the user responds — making it best suited for decisions, confirmations, and self-contained flows where that level of focus is warranted.
  */
 declare const Modal: {
-    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId, ...otherProps }: Props): React.JSX.Element;
+    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId, draggable, initialPosition, ...otherProps }: Props): React.JSX.Element;
     setAppElement(rootElement: string | HTMLElement): void;
 };
 export default Modal;

package/dist/overlay/Modal/ModalContext.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type ModalContextType = {
     isModalMounted: boolean;
+    draggable: boolean;
 };
 declare const ModalContext: React.Context<ModalContextType>;
 export declare const useModalContext: () => ModalContextType;

package/dist/overlay/Modal/useDraggableModal.d.ts

@@ -0,0 +1,38 @@
+export type Options = {
+    width: number | string;
+    height?: number | string;
+    initialPosition?: {
+        top: number;
+        left: number;
+    };
+};
+export type DraggableModalState = {
+    nodeRef: React.RefObject<HTMLElement | null>;
+    /** Attach to the draggable inner div's `ref` prop. Keeps nodeRef in sync and drives measurement. */
+    callbackRef: React.RefCallback<HTMLElement>;
+    contentPosition: {
+        top: number;
+        left: number;
+    };
+    bounds: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+};
+/**
+ * Encapsulates the ref, initial positioning, and viewport-aware bounds for a
+ * draggable modal. Pass the returned values to <Draggable> and the ReactModal
+ * style.content object.
+ *
+ * Bounds are expressed as pixel offsets from the element's rendered position
+ * (react-draggable v4.7+ no longer accepts "window" as a string shorthand).
+ *
+ * Initial bounds are estimated from the numeric width/height props (falling
+ * back to the CSS min-width/min-height defaults). After mount, the element is
+ * measured and bounds are corrected to the actual rendered dimensions so the
+ * modal cannot be dragged outside the viewport even when width/height are CSS
+ * strings or the content exceeds the fallback height.
+ */
+export declare function useDraggableModal({ width, height, initialPosition, }: Options): DraggableModalState;

package/dist/overlay/Modal/useModalPosition.d.ts

@@ -0,0 +1,10 @@
+export type ModalPosition = {
+    top: number;
+    left: number;
+};
+/**
+ * Returns the current modal position and an updater that centers the modal on
+ * the provided mouse event's coordinates, clamped to a 20px viewport margin.
+ * Useful when opening a draggable Modal relative to a user click.
+ */
+export declare const useModalPosition: (modalWidth?: number, modalHeight?: number) => [ModalPosition | undefined, (event: MouseEvent) => void];

package/dist/overlay/index.d.ts

@@ -10,4 +10,6 @@ import DropdownListItem from './DropdownListItem';
 import DropdownListItemSelectable from './DropdownListItemSelectable';
 import HintModal from './HintModal';
 import Popover from './Popover';
+export { useModalPosition } from './Modal/useModalPosition';
+export type { ModalPosition } from './Modal/useModalPosition';
 export { Tooltip, Modal, ModalBody, ModalFooter, Calendar, Dropdown, DropdownList, DropdownListDivider, DropdownListItem, DropdownListItemSelectable, HintModal, Popover };

package/llms-instructions/guidelines/HintModal.guidelines.md

@@ -45,3 +45,4 @@ A `primaryButton` is required — typically a "Got it" button that closes the mo
 -   `primaryButton` is required. Pass a `Button` element — the component does not render default actions on its own.
 -   Visibility is partially managed internally via local storage. Once a user checks "Don't show again", the modal will not render again for that `modalId` unless the key is cleared.
 -   `onSetDoNotShowAgainStatus` fires when the checkbox state changes, if you need to sync this externally.
+-   `hideDoNotShowAgainCheckbox` hides the checkbox. `onSetDoNotShowAgainStatus` never fires.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "4.9.0",
+    "version": "4.10.0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",
@@ -54,18 +54,21 @@
         "@babel/core": "^7.24.4",
         "@babel/preset-env": "^7.24.4",
         "@changesets/cli": "^2.29.8",
+        "@playwright/test": "^1.54.0",
         "@storybook/addon-a11y": "10.3.5",
         "@storybook/addon-docs": "10.3.5",
         "@storybook/addon-links": "10.3.5",
         "@storybook/addon-mcp": "^0.6.0",
         "@storybook/addon-onboarding": "10.3.5",
         "@storybook/react-vite": "10.3.5",
+        "@storybook/test-runner": "^0.24.4",
         "@svgr/cli": "^8.0.1",
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^13.2.1",
         "@types/jest": "^25.1.4",
+        "@types/jest-image-snapshot": "^6.4.0",
         "@types/lodash-es": "^4.17.5",
         "@types/node": "^22",
         "@types/react": "^18.2.15",
@@ -75,13 +78,7 @@
         "@typescript-eslint/parser": "^6.11.0",
         "@vitejs/plugin-react": "^4.7.0",
         "babel-jest": "^29.7.0",
-        "@playwright/test": "^1.54.0",
-        "@storybook/test-runner": "^0.24.4",
-        "@types/jest-image-snapshot": "^6.4.0",
         "concurrently": "^9.1.0",
-        "http-server": "^14.1.1",
-        "jest-image-snapshot": "^6.5.2",
-        "wait-on": "^8.0.1",
         "cross-env": "^7.0.3",
         "eslint": "^8.53.0",
         "eslint-config-prettier": "^9.0.0",
@@ -97,10 +94,12 @@
         "eslint-plugin-standard": "^5.0.0",
         "eslint-plugin-storybook": "10.3.5",
         "formik": "^2.2.6",
+        "http-server": "^14.1.1",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-environment-jsdom-sixteen": "^2.0.0",
+        "jest-image-snapshot": "^6.5.2",
         "microbundle": "^0.15.1",
         "npm-run-all": "^4.1.5",
         "prompt": "^1.3.0",
@@ -113,6 +112,7 @@
         "ts-jest": "^29.1.2",
         "typescript": "^5.3.2",
         "vite": "^6.4.1",
+        "wait-on": "^8.0.1",
         "yup": "^0.32.9"
     },
     "files": [
@@ -125,6 +125,7 @@
         "libphonenumber-js": "^1.10.36",
         "lodash-es": "^4.17.15",
         "react-day-picker": "^8.8.0",
+        "react-draggable": "^4.4.5",
         "react-modal": "^3.16.1",
         "react-router-dom": "5.1.2 - 6.7.0",
         "react-select": "^5.10.0",